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>