How to do I align a Button to the bottom of a VBox in FXML?

Question

I have some buttons inside of a VBox. I would like to align the last button to the bottom of the VBox. Is there any way to do this?

I've tried this answer but it didn't work.

Here is my code:

<VBox fx:id="presetVBox" prefHeight="580.0" prefWidth="180.0" style="-fx-background-color: white;">
    <padding>
        <Insets left="10.0" right="10.0"/>
    </padding>
    <Button fx:id="preset1Button" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="Infinity" text="Load Preset 1">
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
    <Button fx:id="preset2Button" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="Infinity" text="Load Preset 2">
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
    <Button fx:id="savePresetButton" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="500.0" text="Save">
        <!-- This button needs to aligned to the bottom of the VBox -->
        <VBox.margin>
            <Insets top="161.0"/>
        </VBox.margin>
    </Button>
</VBox>

Wrap the button in another container, such as another `VBox`, set it `VBox.vgrow="always" alignment="BOTTOM_CENTER"` and you should be set. — Zephyr, Jun 24 '18 at 21:57

score 4 · Accepted Answer · answered Jun 24 '18 at 23:56

Add a empty Region between the button and the child before the last child. If you set the VBox.vgrow property for this node to ALWAYS, VBox resizes it to occupy the remaining space:

<VBox fx:id="presetVBox" prefHeight="580.0" prefWidth="180.0" style="-fx-background-color: white;">
    <padding>
        <Insets left="10.0" right="10.0"/>
    </padding>
    ...
    <Button fx:id="preset2Button" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="Infinity" text="Load Preset 2">
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
    <Region VBox.vgrow="ALWAYS" />
    <Button fx:id="savePresetButton" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="500.0" text="Save">
        <!-- This button needs to aligned to the bottom of the VBox -->
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
</VBox>

For tornadofx, you can use `region { vboxConstraints { vGrow = Priority.ALWAYS } }` if declaring programmatically — dwb, Feb 06 '21 at 19:47

score 1 · Answer 2 · answered Jun 24 '18 at 22:04

Wrap the Button in another container, such as another VBox, set its Vgrow and Alignment properties appropriately:

    <VBox VBox.vgrow="ALWAYS" alignment="BOTTOM_CENTER">
        <Button fx:id="savePresetButton" maxWidth="Infinity" mnemonicParsing="false"
                prefWidth="500.0" text="Save">
            <!-- This button needs to aligned to the bottom of the VBox -->
            <VBox.margin>
                <Insets top="161.0"/>
            </VBox.margin>
        </Button>
    </VBox>

How to do I align a Button to the bottom of a VBox in FXML?

2 Answers2