I have a general button style across an app. I added a google map... and it has a bunch of buttons. Most of them don't have classes.
I'd like to avoid adding classes to every button I have, or trying to select/restyle the individual map buttons.
I thought perhaps a :not(.map) button (my map div having a map class) but that and several variations don't work. I'm guessing because the CSS processor sees the button as a child of elements that don't have a map class, even though one does. Logically something like:
has parent where class !== map
What I need is more like:
does not have parent where class === map
I can think of some JS workarounds, or as mentioned adding classes/specificity to just my buttons, but I'm hoping you whipper-snappers and your newfangled web standards have a more elegant solution.
Related
I'm working on a React App which embeds widgets via <iframe>s. Those widgets also are React apps. Both, the app and the widgets, make use of the same component library (an own one).
This component library provides a <Modal> component, displaying some content in a floating container styled with a backdrop.
If now a widget renders such a <Modal>, this <Modal> of course is bound to the <iframe>s DOM and thus displayed in the boundaries of that <iframe>. And a non-centered <Modal> with a limited backdrop looks ugly.
So I just tried to add that <Modal>'s React portal not to the current document, but to the parent.document (if available and different from the current document).
And well, that works, kind of. The <Modal> is now a child of the parent DOM and thus centers in that viewport.
But if I want to render another custom component, like a <Button> in that <Modal>, all the styles (currently defined via SASS and applied via className) are just not available. These stylings remain in the child DOM :(
Currently, my only idea to solve this is to switch to inline styles. That means I would switch to CSS-in-JS to still have something similar to CSS classes and apply those styles via the style attribute to the nodes.
Since that would make it necessary to modify all components which are used in a <Modal>, I would like to reach out for other ideas and approaches.
Is there another approach how render an <iframe>'s <Modal> using the viewport of the outer app? Or is there a solution on how to also propagate style sheets from the inner DOM to the outer DOM?
I have been trying to disable scroll bars in a text area using the code:
ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
But all I get is a null pointer for "scrollBarv". What am I missing?
You can't disable a scroll bar in a text area via lookups like you are trying to do.
A lookup is CSS based, which usually means it will only work after a CSS application pass has been applied. Generally, for a lookup to work as expected, a layout pass also needs to be applied on the parent node or scene. The logic in the JavaFX layout handlers for complex nodes such as controls may modify the CSS and nodes for the controls.
To understand how to apply CSS and perform a layout pass, read the relevant applyCss() documentation.
So you could do this:
textArea.applyCss();
textArea.layout();
ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
But even then, it would not do what you want. Because it is just a one-time call. If the user types new text into an empty TextArea until it fills the area, then a scroll bar will show up, and if the user deletes text in the text area, the scroll bar will be removed. And the new scroll bar which shows up wouldn't be found when you did your lookup because it would not have existed at that time.
Generally, the preferred alternative to performing lookups to nodes is to apply CSS style classes with the style class defining the desired attributes of the node regardless of the state it is in (and using psuedo-classes if state based CSS definitions are required). However, that probably won't work in this case as I can't see a definition for a disable attribute in the JavaFX CSS reference guide. Perhaps you might manage what you need via the visibility property, though that is unlikely as visibility is a bit different from disable.
The behavior for controlling the scroll bars is internally coded in the TextAreaSkin (which in Java 8 is not part of the public JavaFX API). You could copy or subclass the TextAreaSkin to customize its behavior and then attach your customized skin to your node. This is really the "proper" way to customize internal control behavior in the way in which you wish. A discussion of the detailed steps to achieve this is outside the scope of this answer.
But, in the end, I'm not sure how useful the behavior you desire is. Rather than disabling the vertical scroll bar, you could just disable the entire TextArea, which would be fine for most similar use-cases. Though, perhaps your use-case is different somehow in requiring only the vertical scroll bar to be disabled.
How can i change the marker icon on directions on google maps?
NOTE: The dirty approach of pure CSS based on the classes ids of container elements is not accepted nor a js search-and-replace the img src.
After expired bounty and lots of research im answering my own question: In Google maps API v3, since 24 June 2014 there seems to be no official way to change these markers.
Possible dirty solutions:
CSS:
set display:none to whatever class the image is, and set a custom background on the parent div. set width and height accordingly.
Click functionality between "directions"-"markers on map" will be maintained, but something as little as a change in the class name returned by the API will cause problems. Not semantically correct as the image displayed is a background of a div, and its not clickable.
JS:
Add a listener and after the directions call, when map is idle, search the markup for the image and replace the img src. Will fail if markup returned from API is changed since you have to select by id, class name or something similar.
JS:
Scrap the data, and re-render as you wish. Click functionality between "directions"-"markers on map" of course is lost, and still unstable since is based on scrapping.
In any of the above cases you ll have to suppress markers in markerOptions and also change the marker that is used as point "A" and point "B" to match your dirty solution result.
Will be more than happy to see a better answer than this.
Does anyone have idea on how to style this rectangular button -which is a default child of a QToolbar?
First two images show the button when the graphical interface is on normal screen mode. It appears; since toolbar icons don't have enough space. Third picture shows fullscreen mode, in which my icons have space.
I want to style its shape, so that it has a radial border, without a corner. This will cancel its ugly look, in second image.
I want to let users use the interface in normal view, so locking application to fullscreen is not an option. I do want to use the button, so removing is not acceptable. Styling its position to 5 pixels left or replacing it with another stylable button could be possible solutions, but I couldn't manage to do them.
I played a lot with toolbutton and pushbutton stylesheets, but had no luck on styling this small button. I am pretty obsessed about my graphical design, but don't want to waste too much time (if solution is not trivial, I will change my toolbar to a rectangular one).
Thanks in advance.
I found the solution by listing the children object names of my toolbar.
QStringList list;
for(int i=0; i<toolBar->children()->size(); i++)
list.append(toolBar->children()[i]->objectName();
Inside the list, there is only one object that has a default name (not " "). It is qt_toolbar_ext_button
Then I was able to style it as:
"#qt_toolbar_ext_button { //... }"
I know this has been answered, but for anyone who needs to know the answer its a "QToolButton" and if you need to style a specific button with an object name you do "QToolButton#objectName" in an external resources file stylesheet or in the Widget UI stylesheet dialog for different objects.
QToolButton#objectName {
}
Check out the documentation - http://doc.qt.digia.com/4.2/stylesheet.html
This gives you the syntax for stylesheets in Qt, or "QSS" files.
Just do it: Qt documentation about stylesheets
I have a web app that I've recently applied a jQuery ThemeRoller theme to. Now I want to have a simple <h2> element have the same rounded-rectangular look as the dialog titlebar or datepicker title. How can I best apply these to my elements that aren't part of larger jQuery UI constructs?
I started down the path of just setting css class values manually based on what I could see inside Chrome's inspector tool, and I got part of the way there before I got nervous that this wasn't going to necessarily be the best way since I'm bypassing any css class assignment logic that might occur inside jQuery UI.
So, is there an easier way of applying those styles, or should I just go down the road of explicitly setting css styles on my headers?
There isn't any magic to the jQuery ThemeRoller CSS styles, if you look through the CSS files that it generates, you will find that they are generally clear and concise and easy enough to read.
The rounded corners in the ThemeRoller CSS will not work in IE, so you might not want to depend on them too much, but if you do, just apply the CSS using style='blah'.
stevedbrown's answer is quite correct.
You can apply rounded corners to any containing element by using the ui-corner- prefix. For example, to apply rounded corners to all four corners of a div element, you'd use ui-corner-all.
To only style the top corners of that same element, you'd apply ui-corner-tr ui-corner-tl for the TopLeft and TopRight corners.
Another possibility to the above is, if you know the CSS attributes you want to copy, you can do it programmatically like:
var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");
and apply these to your elements
$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);
etc
Kind of clunky, but it does allow your CSS developers to update the themerolled themes and you don't have to worry about updating any of your code anymore.