CODEWITHSUNDEEP
javajavafxfxml
airsquared
airsquared

Reputation: 633

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>

Upvotes: 3

Views: 4546

Answers (2)

fabian
fabian

Reputation: 82451

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>

Upvotes: 5

Zephyr
Zephyr

Reputation: 10253

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>

Upvotes: 1

Related Questions