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 these buttons, without using a CSS style sheet. I think there should be a way to do this.

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

I'm glad for any ideas. :)

Does this help? http://stackoverflow.com/questions/2561305/how-can-i-set-distance-between-elements-ordered-vertically — Andy, Aug 21 '13 at 17:11
@Andy: No, I'm working with JavaFX and not with Swing at the moment, but thanks! :) — codepleb, Aug 21 '13 at 17:13

Sergey Grinev · Accepted Answer · 2022-10-06T21:43:10.837

85

VBox supports spacing out of the box:

VBox menuButtons = new VBox(5);

or

menuButtons.setSpacing(5);

edited Oct 06 '22 at 21:43

answered Aug 21 '13 at 18:37

Sergey Grinev

34,078
10
128
141

1

Thx... :$ I tought this would be the number of elements in it. Nerver tought that this'd be so simple. – codepleb Aug 21 '13 at 21:27
11

Btw: In FXML it looks like this: `...` – codepleb Aug 14 '16 at 15:37
2

the amounts of votes on this straightforward question really put this class' API in perspective :) – Sergey Grinev Jan 27 '21 at 14:01
1

@codepleb the FXML version is what I was looking for. Thanks a lot! – Zac Mar 29 '21 at 19:51

Branislav Lazic · Answer 2 · 2013-09-10T00:43:42.587

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:

enter image description here

With spacing:

enter image description here

Nice answer! Big Thx! :) I would have chosen this, if Sergey Grinev didn't give a solution where I can set this directly in the constructor. — codepleb, Aug 21 '13 at 21:25
Builder are depreciated in javafx 8, you should use standard way to create the object and set its spacing. see [this post on oracle forum](https://forums.oracle.com/thread/2544323) — Flo C, Aug 22 '13 at 09:19
@FloC I believe you. But I'm using Java 1.7 update 21. Nevertheless, thanks for pointing that. — Branislav Lazic, Aug 22 '13 at 10:39

score 14 · Answer 3 · answered Nov 05 '15 at 19:38

14

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

<VBox spacing="5" />

answered Nov 05 '15 at 19:38

gronostaj

2,231
2
23
43

score 9 · Answer 4 · answered Sep 21 '16 at 14:19

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.

Good post but I think it is a bit cleaner to do `HBox.setMargin(Node, Insets)` rather than `pane.setMargin(Node, Insets)` since `setMargin` is a static function. I don't know if either way makes a practical difference. — Max, Oct 19 '17 at 15:27

score 3 · Answer 5 · answered Jul 04 '22 at 21:02

3

The same effect as the setSpacing method can also be achieved via css:

VBox {
    -fx-spacing: 8;
}

answered Jul 04 '22 at 21:02

Trizion

262
1
12

Adding space between buttons in VBox

5 Answers5

Linked