How do I add margin to a JavaFX element using CSS?

Question

I have the following fragment of FXML:

<VBox fx:id="paneLeft">
    <TextField promptText="Password"/>
    <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
    <Hyperlink text="Registration"/>
</VBox>

Is it possible to add a spacing of 10px between the Button and Hyperlink elements using CSS?

Thanks in advance!

Answer 1

It seems you cannot. JavaFX has a limited support on CSS right now.

However, the CSS padding and margins properties are supported on some JavaFX scene graph objects.

says the official CSS Reference Guide. So workaround could be to use extra other layout, another VBox for instance:

<VBox fx:id="paneLeft" spacing="10">
    <VBox fx:id="innerPaneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
    </VBox>
    <Hyperlink text="Registration"/>
</VBox>

---

Update:
Found a bit more perfect way of doing it, but still not by CSS.

 <?import javafx.geometry.Insets?>

 <VBox fx:id="paneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000">
            <VBox.margin>
                <Insets>
                    <bottom>10</bottom>
                </Insets>
            </VBox.margin>
        </Button>
        <Hyperlink text="Registration"/>
 </VBox>

This avoids defining an unnecessary extra layout.