Why are the GridPane columns spaced out so much-CodePudding

I am trying to create a simple interface using java and FXML. I am using a GridPane and everything is appearing correctly however the spacing of the columns is excessive. This is the code :

<Label styleClass="label-h2" GridPane.columnIndex="0" GridPane.rowIndex="0" text= "Personal Details"/> 
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="1" text= "Name:"/> 
<TextField fx:id="nameTf"  GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="2" text= "Email:"/> 
<TextField fx:id="emailTf" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="3" text= "Phone:"/> 
<TextField fx:id="phoneTf" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="4" text= "Phone:"/> 
<TextField fx:id="addressTf" GridPane.columnIndex="1" GridPane.rowIndex="4"/>
<Line startX="0.0" startY="200.0" endX="610.0" endY="200.0" stroke="#F0F8FF" GridPane.rowIndex="5"/>
<Label styleClass="label-h2" GridPane.columnIndex="0" GridPane.rowIndex="6" text= "Personal Details"/> 
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="7" text= "TFN:"/> 
<TextField fx:id="tfnTf" GridPane.columnIndex="1" GridPane.rowIndex="7"/>   
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="8" text= "Paid Hours:"/> 
<TextField fx:id="paidTf" GridPane.columnIndex="1" GridPane.rowIndex="8"/>   
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="9" text= "Hourly Rate:"/> 
<TextField fx:id="hrlyTf" GridPane.columnIndex="1" GridPane.rowIndex="9"/>   
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="10" text= "Job Type:"/> 
<TextField fx:id="typeTf" GridPane.columnIndex="1" GridPane.rowIndex="10"/>   

<HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="11" alignment="BOTTOM_CENTER" style="-fx-padding: 5 30 15 30;">
    <Button fx:id="addBtn" text="Add" onAction="#handleAdd"/>
    <Button fx:id="updateBtn" text="Update" onAction="#handleUpdate"/>
    <Button fx:id="closeBtn" text="Close" onAction="#empClose"/>   
</HBox>  

<stylesheets>
    <URL value="@stpfx.css" />
</stylesheets>

This is how its appearing : Current output

This is how I need it to appear : Output needed

CodePudding user response：

Statistically setting the size of the line is not good for responsiveness, I suggest you use a Separator alongside with columnSpan :

<Label styleClass="label-h2" text="Personal Details" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<Label styleClass="label-opac" text="Name:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
<TextField fx:id="nameTf" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Label styleClass="label-opac" text="Email:" GridPane.columnIndex="0" GridPane.rowIndex="2" />
<TextField fx:id="emailTf" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Label styleClass="label-opac" text="Phone:" GridPane.columnIndex="0" GridPane.rowIndex="3" />
<TextField fx:id="phoneTf" GridPane.columnIndex="1" GridPane.rowIndex="3" />
<Label styleClass="label-opac" text="Phone:" GridPane.columnIndex="0" GridPane.rowIndex="4" />
<TextField fx:id="addressTf" GridPane.columnIndex="1" GridPane.rowIndex="4" />
<Separator prefWidth="200.0" GridPane.columnSpan="2" GridPane.rowIndex="5" />
<Label styleClass="label-h2" text="Personal Details" GridPane.columnIndex="0" GridPane.rowIndex="6" />
<Label styleClass="label-opac" text="TFN:" GridPane.columnIndex="0" GridPane.rowIndex="7" />
<TextField fx:id="tfnTf" GridPane.columnIndex="1" GridPane.rowIndex="7" />
<Label styleClass="label-opac" text="Paid Hours:" GridPane.columnIndex="0" GridPane.rowIndex="8" />
<TextField fx:id="paidTf" GridPane.columnIndex="1" GridPane.rowIndex="8" />
<Label styleClass="label-opac" text="Hourly Rate:" GridPane.columnIndex="0" GridPane.rowIndex="9" />
<TextField fx:id="hrlyTf" GridPane.columnIndex="1" GridPane.rowIndex="9" />
<Label styleClass="label-opac" text="Job Type:" GridPane.columnIndex="0" GridPane.rowIndex="10" />
<TextField fx:id="typeTf" GridPane.columnIndex="1" GridPane.rowIndex="10" />