JavaFX - CSS 1px overflow button

Question

I have a normal classic Button in my application which was built with JavaFX Scene Builder 2.0. I wanted to add some style so I linked the scene and the .css file which looks like :

.button {
    -fx-background-color: rgba(255,255,255,0.9);
    -fx-border-style: solid;
    -fx-border-color: grey;
    -fx-border-width: 1px;
    -fx-max-height: 40px;
}

In the fxml file, the button has a 46px pref-width, and here's the result :

We can see some kind of 1px overflow on the bottom of it and i dont know how to make it disappear. Here's the FXML file :

  <HBox fx:id="footerLayout" alignment="CENTER_LEFT" layoutX="14.0" layoutY="489.0" prefHeight="100.0" prefWidth="1102.0">
     <children>
        <Button fx:id="addDetenuButton" mnemonicParsing="false" prefHeight="46.0" prefWidth="215.0" text="Ajouter un détenu" />
        <Separator prefWidth="10.0" visible="false" />
        <Button fx:id="editDetenuButton" mnemonicParsing="false" prefHeight="46.0" prefWidth="215.0" text="Modifier le détenu" />
        <Separator prefWidth="565.0" visible="false" />
        <Button fx:id="closeButton" mnemonicParsing="false" prefHeight="46.0" prefWidth="105.0" text="Quitter" />
     </children>
  </HBox>

It will help us a lot if you provide the FXML file with the initialization of the button. — JKostikiadis
I can't reproduce your visual problem. Just a guess.. it's a problem of SceneBuilder 2.0. You should (in my opinion) use the latest Gluon SceneBuilder vesion which you can find here : gluonhq.com/products/scene-builder Just care about the java version, because there are two builds ( for java 8 and java 9 ). And if the problem still appear please let me know. — JKostikiadis
I tried Gluon SceneBuilder, it didn't change anything, but i discovered that when the button is active or focused (not hovered) the white space goes away ... It seems to behave as a kind of shadow — NicoTine
Right now I am not at a computer I am going to give it a look tomorrow. — JKostikiadis

NicoTine NicoTine · Accepted Answer · 2017-11-27T21:17:47

I figured out why ... I added :

-fx-background-insets: 0;

to

.button {
    -fx-background-color: rgba(255,255,255,0.9);
    -fx-border-style: solid;
    -fx-border-color: grey;
    -fx-border-width: 1px;
    -fx-max-height: 40px;
}

and it worked out, the "white shadow" is gone !

JavaFX - CSS 1px overflow button

1 Answers