CODEWITHSUNDEEP
javafx-2javafx
codepleb
codepleb

Reputation: 10571

Adding space between buttons in VBox

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. :)

Upvotes: 50

Views: 128270

Answers (5)

Sergey Grinev
Sergey Grinev

Reputation: 34478

VBox supports spacing out of the box:

VBox menuButtons = new VBox(5);

or

menuButtons.setSpacing(5);

Upvotes: 88

Trizion
Trizion

Reputation: 470

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

VBox {
    -fx-spacing: 8;
}

Upvotes: 4

Haggra
Haggra

Reputation: 4187

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.

Upvotes: 9

gronostaj
gronostaj

Reputation: 2282

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

<VBox spacing="5" />

Upvotes: 16

Branislav Lazic
Branislav Lazic

Reputation: 14806

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

Upvotes: 21

Related Questions