Adding space between buttons in VBox

Question

I have a collection of buttons:

VBox menuButtons = new VBox();
menuButtons.getChildren().addAll(addButton, editButton, exitButton);

I want to add some spacing between this buttons, without using a CSS sheet. I think there should be a way for this.

setPadding(); is for the Buttons in the Box. setMargin(); should be for the Box itself. But I didn't find a way for the spacing between the buttons.

I'm glad for any ideas. :)

Answer 1

As others have mentioned you can use setSpacing().

However, you can also use setMargin(), it is not for the pane (or box in your words), it is for individual Nodes. setPadding() method is for the pane itself. In fact, setMargin() takes a node as a parameter so you can guess what it's for.

For example:

HBox pane = new HBox();
Button buttonOK = new Button("OK");
Button buttonCancel = new Button("Cancel");
/************************************************/
pane.setMargin(buttonOK, new Insets(0, 10, 0, 0)); //This is where you should be looking at.
/************************************************/
pane.setPadding(new Insets(25));
pane.getChildren().addAll(buttonOK, buttonCancel);
Scene scene = new Scene(pane);
primaryStage.setTitle("Stage Title");
primaryStage.setScene(scene);
primaryStage.show();

You could get the same result if you replaced that line with

pane.setSpacing(10);

If you have several nodes that should be spaced, setSpacing() method is far more convenient because you need to call setMargin() for each individual node and that would be ridiculous. However, setMargin() is what you need if you need margins(duh) around a node that you can determine how much to each side because setSpacing() methods places spaces only in between nodes, not between the node and the edges of the window.

Answer 2

Just call setSpacing method and pass some value. Example with HBox (it's same for VBox):

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.HBoxBuilder;
import javafx.stage.Stage;

public class SpacingDemo extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        stage.setTitle("Spacing demo");

        Button btnSave = new Button("Save");
        Button btnDelete = new Button("Delete");
        HBox hBox = HBoxBuilder.create()
                .spacing(30.0) //In case you are using HBoxBuilder
                .padding(new Insets(5, 5, 5, 5))
                .children(btnSave, btnDelete)
                .build();

        hBox.setSpacing(30.0); //In your case

        stage.setScene(new Scene(hBox, 320, 240));
        stage.show();
    }
}

And this is how it looks:

Without of spacing:

With spacing:

Answer 3

VBox supports spacing:

VBox menuButtons = new VBox(5);

or

menuButtons.setSpacing(5);

Answer 4

If you're using FXML, use the spacing attribute:

<VBox spacing="5" />