I have an issue where my buttons in JavaFX become slightly smaller when clicked.
here you can see that the "change password" button is clicked/selected.
here you can see the "admin functions" button is clicked/selected.
I suspected this was something to do with the buttons having focus, as when i click chrome or another application with this running, it reverts to desired look
the buttons are currently within a 4x1 GridPane, with the 0th slot being occupied by the label.
here is my CSS if it helps:
.button{
-fx-border-color: null;
-fx-border-width: 0;
-fx-background-color: #2c3cff;
-fx-fill: true;
-fx-pref-height: 100;
-fx-pref-width: 320;
-fx-text-fill: #b9b9b9;
-fx-border-radius: 0;
-fx-min-width: 320;
-fx-min-height: 100;
-fx-background-radius: 0;
-fx-animated: false;
}
.grid{
-fx-background-color:#3e3e48;
}
.label{
-fx-text-fill: #b9b9b9;
}
Edit: I have found a temporary "solution", more of a workaround: I put a horizontal separator just below my HBox and this allowed me to mask the weird button size changes. would still like answers about how to do this properly.
Thanks!
So, I figured it out after a long time of trying to use workarounds such as the separator.
The default FX stylesheet applied this to all buttons:
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
and whilst in my .button:focused
definition i had set these to 0, in my .button
definition i had not, so it had taken the insets value from the default CSS. by applying -fx-background-insets: 0,0,0,0,0;
to both .button
and .button:hover
i was able to achieve the desired result.
Note: you can just type
-fx-background-insets: 0;
i left the full values in in case i want to change at a later date.