An example of this is a button that adds a border on hover through CSS. When it's hovered over, the button jumps around, I assume because the border adds to its width and height. In javafx 2.2, this didn't happen.
My workaround is to add a transparent border of the same width on the non-hovered mode. Here is the CSS I'm using:
.toolbarButton {
-fx-font-family: 'FontAwesome';
-fx-font-size: 1.1em;
-fx-padding: 3 5 1 5;
-fx-background-color: transparent;
-fx-focus-traversable: false;
-fx-text-fill: ladder(-fx-background, white 49%, black 50%);
-fx-graphic-text-gap: 0;
}
.toolbarButton:hover {
-fx-border-color: -fx-text-fill;
-fx-border-style: solid;
-fx-border-width: 1;
-fx-border-radius: 3;
}
My workaround is to add a transparent border of the same width on the non-hovered mode. Here is the CSS I'm using:
.toolbarButton {
-fx-font-family: 'FontAwesome';
-fx-font-size: 1.1em;
-fx-padding: 3 5 1 5;
-fx-background-color: transparent;
-fx-focus-traversable: false;
-fx-text-fill: ladder(-fx-background, white 49%, black 50%);
-fx-graphic-text-gap: 0;
}
.toolbarButton:hover {
-fx-border-color: -fx-text-fill;
-fx-border-style: solid;
-fx-border-width: 1;
-fx-border-radius: 3;
}
- duplicates
-
JDK-8127435 Removal of hovered style class, does not update styling
-
- Closed
-
- relates to
-
JDK-8123997 Ensemble: toolbar changes height when one of All, Samples or Document gets focus
-
- Closed
-