JavaFX 8 - GridPane autosizing issue

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

enter image description here

Case 2: KO (empty space in the GridPane)

enter image description here

Can you clarify what you mean here? I would have interpreted your pseudo-code `column0.width` to mean the width of `Label column0;`, etc Obviously this doesn't make sense in your second example, as `column0.width` would be zero (similarly the others), since those labels are not displayed. (And it wouldn't be true in the first example anyway.) So do you mean the width of the actual columns? If so, for it to be true in the first example you must be including the `hgap`... but then it becomes trivially true in the second example. So, what do you mean? (I'll upvote so you can post images.) — James_D, Feb 05 '15 at 18:58
You are right, by column0 I didn't mean the label but the column itself and I didn't include the hgaps in my pseudocode.I added the gaps to make the screenshots clear. I will upload screenshots of both cases asap and you will see clearly the problem which is: in the second case, there is an empty space to the right of the column2. This space is inside the gridpane. In this particular example, this space grows when column0 or column1 grows. That's why I guess the empty space width = column 0's width + column 1's. It's only a guess but anyway, the empty space is annoying. — Jonathan, Feb 06 '15 at 07:26

score 0 · Answer 1 · answered Aug 19 '15 at 20:53

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!

JavaFX 8 - GridPane autosizing issue

1 Answers1