CODEWITHSUNDEEP
javacssjavafx
M.E.
M.E.

Reputation: 5515

JavaFX - Add space between buttons via CSS

I am trying to add some space between buttons in JavaFX using CSS. I know that separator element can do that, but I prefer to use it to separate logical groups of buttons.

I have tried:

<HBox id="buttonPanel" prefHeight="400.0" prefWidth="600.0" styleClass="buttonPanel" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.chart.buttons.ButtonPanelController">
    <stylesheets>
        <URL value="@buttonpanel.css"/>
    </stylesheets>

    <Button text="INSTRUMENT"/>
    <Separator/>        
    <Button text="F"/>
    <Button text="T"/>
    <Button text="SR"/>
    <Separator/>

</HBox>

.buttonPanel .button {

    -fx-spacing: 5;
    -fx-border-width: 0;
    -fx-padding: 1 2 1 2;   /* Top Right Bottom Left */

}

But I do not get any result:

enter image description here

Upvotes: 3

Views: 1403

Answers (3)

NebuCodeNezzar
NebuCodeNezzar

Reputation: 365

Since you are using a Hbox container, you can just use the setSpacing() method:

setSpacing(double value)

This method allows you to set a desired space between the children of the HBOX container, which, in this scenario, is your buttons, this way:

buttonPanel.setSpacing(10);

Upvotes: 0

M.E.
M.E.

Reputation: 5515

I did this:

.buttonPanel {

    -fx-spacing: 5;

}

Spacing seems that needs to be applied to the container, not to the buttons themselves.

Upvotes: 4

Raw
Raw

Reputation: 506

If you give an ID then try #

#buttonPanel {
  -fx-spacing: 5;
  -fx-border-width: 0;
  -fx-padding: 1 2 1 2;   /* Top Right Bottom Left */
}

Upvotes: 5

Related Questions