I wan to make 2 different styles of button in one css. So when creating the second button i added class to it using:
close.getStyleClass().add("close-button");
so now i can reference this button in css by:
.button.close-button
But now i dont know how to reference pseudoclasses of button when using the .close-button class.
I tried accessing it by
.button.close-button:selected
or
.button:selected.close-button
Nor of these seems to work. Is there any way how to do it? Or do i have to create my own pseudoclasses for the .close-button class and add and remove them in listeners of the btton in code?
I am creating the button using:
Button close = new Button("X");
close.getStyleClass().add("close-button");
close.setOnAction((event) -> {
....
});
Than i am adding it to the layout:
HBox hbox = new HBox(rbSelect, label, pane, close);
my css looks like:
.button {
...
}
.button.close-button {
-fx-background-color: #E81123;
}
.button:selected.close-button {
-fx-background-color: greenyellow;
}
The button looks like this:
When i click on it:
Seems like nothing happens, when i would expect the button to change color to greenyellow
I'm not 100% sure this is necessary, but by convention the pseudo class selector is added after the class selectors:
.button.close-button:selected {
-fx-background-color: greenyellow;
}
However there is no selected pseudo class for Button. It's available for CheckBox and ToggleButton, but not for regular Buttons. Pseudoclasses that are available are :pressed and :hover, see css reference.
You could of course add the pseudoclass yourself, assuming you're using JavaFX 8:
PseudoClass selected = PseudoClass.getPseudoClass("selected");
close.setOnAction((event) -> {
....
close.pseudoClassStateChanged(selected, true);
});
Related
I have multiple css classes that make up a button using SCSS.
.ghost-button {
// CSS goes here
}
.ghost-button-label {
// CSS goes here
}
.plus-circle {
//CSS goes here
}
Using Angular I can control the disabled state using the following feature.
[class.disabled]="booleanFlag"
I wanted to have a disabled state for this button with out having multiple disabled classes like so,
.ghost-button.disabled {
// CSS goes here
}
.ghost-button-label.disabled {
// CSS goes here
}
.plus-circle.disabled {
//CSS goes here
}
This is an example of what I am trying to do. This did not work for me.
.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}
Here is the markup I use for the button,
<div style="padding-top: 10px" (click)="handleClickAdd($event)">
<div class="ghost-button ghost-button-label icon-custom icon-margin plus-circle plus-circle-position" [class.disabled]="blockAdditions">
<div>
<div>Add</div>
</div>
</div>
</div>
Is there a way to do this? Thanks.
This doesn't work because it means each class is a descendant of the previous:
.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}
If you're trying to just select that one div with all four classes, just remove the spaces:
.ghost-button.ghost-button-label.plus-circle-position.disabled {
//CSS goes here
}
If you're trying to select any elements that have the disabled class plus one of the three other classes, then you use commas to separate the different combinations:
.ghost-button.disabled,
.ghost-button-label.disabled,
.plus-circle-position.disabled {
// CSS
}
Of course you could just select .disabled if you want this CSS applied to every element with the disabled class:
.disabled {
// CSS
}
Just be sure to take into account View Encapsulation. You may need to put this CSS in the global style file styles.css if this class exists in more than one component.
Just a note, you are not setting the disabled state here, you are adding a class with the name "disabled". disabled is a boolean attribute you can set via HTML, which you can then select with the pseudo-class :disabled.
button:disabled {
color: red
}
<button>Not Disabled</button>
<button disabled>Disabled</button>
If this is what you were actually trying to do then in Angular it would be:
[disabled]="booleanFlag"
You can target a disabled element with the :disabled pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
So depending on the relationship between your button/label/plus-circle you should be able to target those as well based on whether the button is disabled. For example, if the button and label are siblings you could do this:
.ghost-button:disabled,
.ghost-button:disabled + .ghost-button-label,
.ghost-button:disabled + .plus-circle {
// CSS goes here
}
That would only work if the label and circle were siblings that come after the button, if they are before the button, you can't select them that way.
in an another question I find this possibilty with css
.menu .label
{
-fx-text-fill: black;
}
but it doesn't work with the setStyle method
menu.setStyle("-fx-text-fill: black");
The CSS applies the style to each Label below a Menu.
Whereas menu.setStyle(...) will apply only to the menu itself. And the menu itself does not have a -fx-text-fill property.
If you change your CSS to:
.menu
{
-fx-text-fill: blue;
}
then it will be the same as your code ... and also stop to show the menu in color.
Menus don't support setting their font color like this. The CSS solution relies on an implementation detail.
If you don't want to do that you must use menu.setGraphic(...) to set a node, e.g:
Menu menuFile = new Menu("");
Label t = new Label("File");
t.setStyle("-fx-text-fill: blue;");
menuFile.setGraphic(t);
is there a possibility to refer to an anchor pane in css?
If the anchor pane happens to be the root, than it's ok:
.root{
-fx-background-image: url("xxx.yy");
}
It works. But if not, then how to do this? I tried .anchor-pane{}, it didn't work. Then I read, that anchor pane has everything that Pane has. So I tried .pane{} too... It didn't work.
How can I set the background to a none root anchor pane?
Thank you!
You can always assign a css class and add it to the AnchorPane explicitly
anchorPane.getStyleClass().add("pane");
In your css :
.pane{
-fx-background-image: url("xxx.yy");
}
You can perform the same by adding a css id
anchorPane.setId("pane");
In you css :
#pane{
-fx-background-image: url("xxx.yy");
}
This answer is the same as Itachi's I just wrote it at the same time..
You use CSS selectors in a CSS stylesheet to select nodes.
A pane is a node. A node can have a css id set on it node.setId("xyzzy-id"), or it can have style classes set on it node.getStyleClass().add("xyzzy-class").
For the provided examples you could select the pane in either of these ways:
Select by ID:
#xyzzy-id {
-fx-background-color: palegreen;
}
Select by Class:
.xyzzy-class {
-fx-background-color: papayawhip;
}
You can also set FXML attributes on the node for the id and style class (rather than doing this in code as explained above). SceneBuilder has fields for this, so if you are writing FXML using SceneBuilder, just fill in the appropriate fields and it will add the required attributes to your FXML file.
I am developing a web app using twitter bootstrap, i want to create my own button with my own background, i don't want to use the already present buttons using btn-primary etc... but i want to create my own button with my own class. I want to use the core functionality of the btn class. so ideally my button will use the class=" btn btn-myPrimary".
I checked in variables.less and buttons.less, there only i am able to change the value of existing buttons such as btn-primary. i am not able create my own button something like btn-myPrimary.
Thanks in advance for any help.
If you can compile the less files then you can use this button mixin (from mixins.less):
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(#color; #background; #border) {
color: #color;
background-color: #background;
border-color: #border;
...
If you look at buttons.less you can see how they use it:
.btn-default {
.button-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.btn-primary {
.button-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
Like this ref links below
Link
I have a IButton instance and I want to change its name and color after click.
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
if(button.getTitle().equals("Enabled")) {
button.setTitle("Disabled");
button.setTitleStyle("disabledButton");
}
else {
button.setTitle("Enabled");
button.setTitleStyle("enabledButton");
}
}
});
As we do in general GWT project,
I have added following to the default .css file:
.enabledButton {
color:green;
}
.disabledButton {
color:red;
}
But when I run the application, it is not showing either red or green color.
Is there any other way in SmartGWT to apply CSS styles?
IButton is a StatefulCanvas, which means it handles states. This is done by adding suffixes after the base style name. For example if you set the titleStyle to "enableButton" and you move your mouse over the button, it will look for the css class: enableButtonOver. If the button is also focused, it will look for enableButtonFocusedOver etc (there are a couple of suffix combinations). Your example works if you click outside from the browser, so it will lost the focus and simply will use the enableButton css class. You can disable each state by for example setShowFocused(false). See the api.