Can I use constraints with any element? - javafx

Question

I apologize for perhaps lame question but I'm new to JavaFX and after reading 4 tutorials I can't find clear information how constraints work.
Can I set constraints to any control? Here is what I'm trying to achieve. I have VBox with ButtonBar of fixed height and I want second control to fill remaining area as I resize VBox.
<AnchorPane id="main-pane" style="-fx-border-color: #ADFF2F;" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox prefHeight="300.0" prefWidth="400.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<ButtonBar prefHeight="40.0" prefWidth="200.0">
<buttons>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</buttons>
</ButtonBar>
<AnchorPane id="inner-pane" style="-fx-border-color: #FF0000;">
<children>
<ColorPicker prefHeight="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
</children>
</AnchorPane>
</children>
</VBox>
</children>
</AnchorPane>
Interestingly enough inner-pane widens as I resize the window but botton edge does not. How can I fix that ?

Answer 1

Considering you are using SceneBuilder, you can do the following :
Remove the anchorpane and make ColorPicker a child of VBox. Since anchorpane is not the perfect layout for what you are trying to achieve. It allows the edges of child nodes to be anchored to an offset from the anchor pane's edges, but has no property to enforce their growth when the same happens to it.
In the ColorPicker Layout properties set VBox.vgrow="ALWAYS" and Max Height and Max Width as MAX_VALUE.
FXML (Incase you don't use SB)
<AnchorPane id="main-pane" style="-fx-border-color: #ADFF2F;" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox prefHeight="300.0" prefWidth="400.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<ButtonBar prefHeight="40.0" prefWidth="200.0">
<buttons>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</buttons>
</ButtonBar>
<ColorPicker prefHeight="200.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS" />
</children>
</VBox>
</children>
</AnchorPane>