JavaFX 8 - GridPane autosizing issue - javafx-8

Question

There is an issue with the GridPane autosizing when setting some specific span configuration.
The following configuration works as I expect:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Border;
import javafx.scene.layout.BorderStroke;
import javafx.scene.layout.BorderStrokeStyle;
import javafx.scene.layout.BorderWidths;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class GridPaneWidthIssue extends Application {
public static void main(String... arguments) {
launch(arguments);
}
#Override
public void start(Stage primaryStage) throws Exception {
GridPane gridPane = new GridPane();
BorderStroke borderStroke = new BorderStroke(Color.RED,
BorderStrokeStyle.SOLID, CornerRadii.EMPTY,
BorderWidths.DEFAULT);
Border border = new Border(borderStroke);
gridPane.setBorder(border);
gridPane.setGridLinesVisible(true);
gridPane.setHgap(2);
gridPane.setVgap(2);
gridPane.setPadding(new Insets(10));
Label column0 = new Label("Column 0");
Label column1 = new Label("Column 1");
Label column2 = new Label("Column 2");
Label column01 = new Label("Span column 0 and 1");
Label column012 = new Label("Span column 0, 1 and 2");
gridPane.add(column0, 0, 0);
gridPane.add(column1, 1, 0);
gridPane.add(column2, 2, 0);
gridPane.add(column01, 0, 1, 2, 1);
gridPane.add(column012, 0, 2, 3, 1);
Scene scene = new Scene(gridPane);
primaryStage.setScene(scene);
primaryStage.show();
}
}
I cannot post image yet to prove it, but I can verify the following assertion:
**gridpane.width = column0.width + column1.width + column2.width
When I remove the labels in the row 0, I get the following code:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Border;
import javafx.scene.layout.BorderStroke;
import javafx.scene.layout.BorderStrokeStyle;
import javafx.scene.layout.BorderWidths;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class GridPaneWidthIssue extends Application {
public static void main(String... arguments) {
launch(arguments);
}
#Override
public void start(Stage primaryStage) throws Exception {
GridPane gridPane = new GridPane();
BorderStroke borderStroke = new BorderStroke(Color.RED,
BorderStrokeStyle.SOLID, CornerRadii.EMPTY,
BorderWidths.DEFAULT);
Border border = new Border(borderStroke);
gridPane.setBorder(border);
gridPane.setGridLinesVisible(true);
gridPane.setHgap(2);
gridPane.setVgap(2);
gridPane.setPadding(new Insets(10));
Label column0 = new Label("Column 0");
Label column1 = new Label("Column 1");
Label column2 = new Label("Column 2");
Label column01 = new Label("Span column 0 and 1");
Label column012 = new Label("Span column 0, 1 and 2");
// gridPane.add(column0, 0, 0);
// gridPane.add(column1, 1, 0);
// gridPane.add(column2, 2, 0);
gridPane.add(column01, 0, 1, 2, 1);
gridPane.add(column012, 0, 2, 3, 1);
Scene scene = new Scene(gridPane);
primaryStage.setScene(scene);
primaryStage.show();
}
}
And the result is not correct:
gridpane.width > column0.width + column1.width + column2.width
I did not verify it, but I guess it is :
gridpane.width = column0.width + column1.width + column0.width + column1.width + column2.width
JavaFX issue or I misunderstood the Gridpane sizing policy ?
Case 1: OK
Case 2: KO (empty space in the GridPane)

Answer 1

You are seeing that extra space to the right of your GridPane because you have a colspan of 3 when adding your column012 Label and a colspan of 2 when adding the column01 Label (and you no longer have three columns but only one). Remember the GridPane is a table and you need to keep it's columns balanced and spans within it's col/row limits. In your case that empty space is simply the third column beyond the reach of any of the labels inside the GridPane.
Change this:
gridPane.add(column012, 0, 2, 3, 1);
To this:
gridPane.add(column012, 0, 2, 2, 1);
And you will see
Ideally if you are planning on having only one column you should remove that colspan and rowspan and just leave this:
gridPane.add(column01, 0, 1);
gridPane.add(column012, 0, 2);
If you keep columns balanced the width of your GridPane will be predictable since it will be computed as: insets + gaps + each column widths
You might also want to take a look at the ColumnConstraints class to customize each column behaviour to your liking.
Hope this helps!