Resizing GridPane's nodes

Question

I have two problems with the following code, tried to figure it out for a long while and ended up unresolved:

1- As it is shown in the following image, the AnchorPane does not follow the height properties I defined for, using the SceneBuilder, it should perfectly fit into the column 2 of the gridpane and span 3 rows, however, it starts protruding from the top of gridpane:

The second and most important problem is that, although I explicitly define the column and row constraints in the FXML and make them VGrow and HGrow enabled, respectively, when I maximize the window, the GridPane does not scale at all. However, I want it to fill the screen.

<Pane fx:id="LocusPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="400.0" minWidth="700.0" style="-fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controllers.AddLocusController">
<children>
    <GridPane fx:id="LocusGridPane" alignment="CENTER" hgap="10.0" layoutX="-14.0" minHeight="300.0" minWidth="600.0" vgap="10.0">
        <columnConstraints>
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="130.0" />
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="238.0" />
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="277.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="107.0" vgrow="ALWAYS" />
            <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="125.0" vgrow="ALWAYS" />
            <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="118.0" vgrow="ALWAYS" />
        </rowConstraints>
        <children>
            <Label alignment="TOP_CENTER" text="Locus Management Panel" textAlignment="CENTER" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="TOP" GridPane.vgrow="ALWAYS">
                <padding>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </padding>
                <GridPane.margin>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </GridPane.margin>
                <font>
                    <Font size="24.0" />
                </font>
            </Label>
            <Label text="Locus:" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
                <font>
                    <Font size="18.0" />
                </font>
            </Label>
            <TextField fx:id="Locus" alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="37.0" prefWidth="223.0" promptText="Enter the locus name here.." GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
                <padding>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </padding>
                <GridPane.margin>
                    <Insets />
                </GridPane.margin>
            </TextField>
            <Button fx:id="Add" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#Add" prefHeight="30.0" prefWidth="100.0" text="Add" GridPane.columnIndex="1" GridPane.rowIndex="2" />
            <Button fx:id="Delete" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#Delete" prefHeight="30.0" prefWidth="100.0" text="Remove" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
            <AnchorPane fx:id="ListViewHolder" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowSpan="3" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
                <GridPane.margin>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </GridPane.margin>
                <cursor>
                    <Cursor fx:constant="CLOSED_HAND" />
                </cursor>
           <padding>
              <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
           </padding>
            </AnchorPane>
        </children>
        <padding>
            <Insets bottom="40.0" left="40.0" right="40.0" top="40.0" />
        </padding>
    </GridPane>
</children>

Answer 1

To prevent the AnchorPane spilling out of its region in the GridPane, don't explicitly set the preferred height of the rows; let them size themselves to hold their content (the default behavior).

The reason the GridPane isn't resizing when the window is resized is that it is wrapped in a Pane (which essentially performs no layout). Can you just omit the wrapper pane, and make the GridPane the root of the FXML? If not, use a layout that makes the GridPane grow to fit the entire content (e.g. use a BorderPane as the wrapper, and put the GridPane in the center: there are many other options here).

SSCCE:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.String?>


<?import javafx.collections.FXCollections?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.ListView?>

<BorderPane fx:id="LocusPane" maxHeight="1.7976931348623157E308"
    maxWidth="1.7976931348623157E308" minHeight="400.0" minWidth="700.0"
    style="-fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.111"
    xmlns:fx="http://javafx.com/fxml/1">
    <center>
        <GridPane fx:id="LocusGridPane" gridLinesVisible="true"
            alignment="CENTER" hgap="10.0" layoutX="-14.0" minHeight="300.0"
            minWidth="600.0" vgap="10.0">
            <columnConstraints>
                <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308"
                    minWidth="10.0" prefWidth="130.0" />
                <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308"
                    minWidth="10.0" prefWidth="238.0" />
                <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308"
                    minWidth="10.0" prefWidth="277.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints maxHeight="1.7976931348623157E308"
                    minHeight="10.0" vgrow="ALWAYS" />
                <RowConstraints maxHeight="1.7976931348623157E308"
                    minHeight="10.0" vgrow="ALWAYS" />
                <RowConstraints maxHeight="1.7976931348623157E308"
                    minHeight="10.0" vgrow="ALWAYS" />
            </rowConstraints>
            <children>
                <Label alignment="TOP_CENTER" text="Locus Management Panel"
                    textAlignment="CENTER" GridPane.columnSpan="2" GridPane.halignment="CENTER"
                    GridPane.hgrow="ALWAYS" GridPane.valignment="TOP" GridPane.vgrow="ALWAYS">
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                    <GridPane.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </GridPane.margin>
                    <font>
                        <Font size="24.0" />
                    </font>
                </Label>
                <Label text="Locus:" GridPane.halignment="CENTER"
                    GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.valignment="CENTER"
                    GridPane.vgrow="ALWAYS">
                    <font>
                        <Font size="18.0" />
                    </font>
                </Label>
                <TextField fx:id="Locus" alignment="CENTER" maxHeight="-Infinity"
                    maxWidth="-Infinity" prefHeight="37.0" prefWidth="223.0"
                    promptText="Enter the locus name here.." GridPane.columnSpan="2"
                    GridPane.halignment="RIGHT" GridPane.rowIndex="1">
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                    <GridPane.margin>
                        <Insets />
                    </GridPane.margin>
                </TextField>
                <Button fx:id="Add" minHeight="-Infinity" minWidth="-Infinity"
                    mnemonicParsing="false" prefHeight="30.0" prefWidth="100.0" text="Add"
                    GridPane.columnIndex="1" GridPane.rowIndex="2" />
                <Button fx:id="Delete" maxHeight="-Infinity" maxWidth="-Infinity"
                    minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
                    prefHeight="30.0" prefWidth="100.0" text="Remove"
                    GridPane.columnIndex="1" GridPane.halignment="RIGHT"
                    GridPane.rowIndex="2" />
                <AnchorPane fx:id="ListViewHolder" maxHeight="1.7976931348623157E308"
                    maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0"
                    GridPane.columnIndex="2" GridPane.halignment="CENTER"
                    GridPane.hgrow="ALWAYS" GridPane.rowSpan="3" GridPane.valignment="CENTER"
                    GridPane.vgrow="ALWAYS">
                    <GridPane.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </GridPane.margin>
                    <cursor>
                        <Cursor fx:constant="CLOSED_HAND" />
                    </cursor>
                    <ListView>
                        <items>
                            <FXCollections fx:factory="observableArrayList">
                                <String fx:value="D8S1179" />
                                <String fx:value="D19S433" />
                            </FXCollections>
                        </items>
                    </ListView>
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                </AnchorPane>
            </children>
            <padding>
                <Insets bottom="40.0" left="40.0" right="40.0" top="40.0" />
            </padding>
        </GridPane>
    </center>
</BorderPane>

Test code:

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class LayoutTest extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        Scene scene = new Scene(FXMLLoader.load(getClass().getResource("Layout.fxml")));
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Screenshots:

After starting:

After resizing: