Search code examples
javajavafxfxml

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


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>

Solution

  • 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>