How to make components fit width of the GridPane they're added to?

Question

I am trying to achieve this layout using FXML and GridPane.

what I achieved is this:

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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>


<GridPane fx:controller="com.mycompany.mavenproject1.PrimaryController" xmlns:fx="http://javafx.com/fxml"  alignment="center">
    <Label fx:id="label" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.hgrow="always" GridPane.vgrow="always" />
    <TextField fx:id="a"  GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField  fx:id="b"  GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <TextField  fx:id="c"  GridPane.columnIndex="2" GridPane.rowIndex="1"/>
    <Button fx:id="solveButton" text="Solve" onAction="#solve" GridPane.columnIndex="0" GridPane.rowIndex="2"  />
    <Button fx:id="clearButton" text="Clear" onAction="#clear" GridPane.columnIndex="0" GridPane.rowIndex="3" />
</GridPane>

Question: How do I make children actually fit the GridPane and why those textfields are not of the same size?

Answer 1

Another alternate way to achieve this is to just relay on the GridPane constraint features. You can add Column/Row constraints and set the fillHeight/fillWidth to true and hgrow/vgrow policies to ALWAYS. Also set the desired nodes maxWidth/maxHeight to Infinity to auto stretch.

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml"  alignment="center">
    <Label fx:id="label" text="Number Format Error !" maxWidth="Infinity" alignment="CENTER" GridPane.columnSpan="3"/>
    <TextField fx:id="a" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField fx:id="b" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <TextField fx:id="c" GridPane.columnIndex="2" GridPane.rowIndex="1"/>
    <Button fx:id="solveButton" text="Solve" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnSpan="3" GridPane.rowIndex="2"  />
    <Button fx:id="clearButton" text="Clear" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnSpan="3" GridPane.rowIndex="3" />
    <columnConstraints>
        <ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
        <ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
        <ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints vgrow="ALWAYS"/>
        <RowConstraints vgrow="NEVER"/>
        <RowConstraints fillHeight="true" vgrow="ALWAYS"/>
        <RowConstraints fillHeight="true" vgrow="ALWAYS"/>
    </rowConstraints>
</GridPane>

Answer 2

How do I make children actually fit the GridPane [...]?

You can wrap a child node in an AnchorPane and set the anchors to zero.

[...] and why those textfields are not of the same size?

I don't know but you can use ColumnConstraints and set each column width to 33.33 %.

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane alignment="center" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
          fx:controller="com.mycompany.mavenproject1.PrimaryController">
    <columnConstraints>
        <ColumnConstraints percentWidth="33.33"/>
        <ColumnConstraints percentWidth="33.33"/>
        <ColumnConstraints percentWidth="33.33"/>
    </columnConstraints>
    <AnchorPane GridPane.columnSpan="3" GridPane.hgrow="always" GridPane.vgrow="always">
        <children>
            <Label fx:id="label" alignment="CENTER" style="-fx-background-color: tomato;" text="Number format error!"
                   AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
                   AnchorPane.topAnchor="0.0"/>
        </children>
    </AnchorPane>
    <TextField fx:id="a" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField fx:id="b" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <TextField fx:id="c" GridPane.columnIndex="2" GridPane.rowIndex="1"/>
    <AnchorPane GridPane.columnSpan="3" GridPane.rowIndex="2">
        <Button fx:id="solveButton" onAction="#solve" text="_Solve" AnchorPane.bottomAnchor="0.0"
                AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/>
    </AnchorPane>
    <AnchorPane GridPane.columnSpan="3" GridPane.rowIndex="3">
        <Button fx:id="clearButton" onAction="#clear" text="_Clear" AnchorPane.bottomAnchor="0.0"
                AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/>
    </AnchorPane>
</GridPane>