JavaFX 1 first column in gridpane is spaced out much farther than the rest

Question

In my program, I try to output an HBox filled with CheckBoxes onto the screen. However, when I run the program, CheckBox "A" is spaced out much further compared to the rest of the checkboxes.

Here is my code:

private Scene assets (Stage primaryStage){

        GridPane gp = new GridPane();
        gp.setVgap(5);
        gp.setPadding(new Insets(25, 25, 25, 25));

        Text title = new Text("Assets");
        title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
        gp.add(title, 0, 0);

        Text description = new Text("Please select all assets you would like to include in your budget");
        gp.add(description, 0, 1);

        String [] optionsString = new String []{"A", "B", "C", "D", "E", "F"};

        for (int i = 0; i < optionsString.length; i++) {
            final int column = i;
            final int row = i;
            String option = optionsString[i];
            CheckBox checkBox = new CheckBox(option);

            HBox checkboxContainer = new HBox(checkBox);
            checkboxContainer.setSpacing(20);

            ChoiceBox<Integer> choice = new ChoiceBox<>();
            Label label = new Label("How many " + optionsString[i] + " options do you have?");
            choice.getItems().addAll(1, 2, 3, 4, 5);

            HBox choiceContainer = new HBox(label, choice);

            checkBox.selectedProperty().addListener((o, oldValue, newValue) -> {
                if (newValue) {
                    gp.add(choiceContainer, 0, row + 4);
                } else {
                    gp.getChildren().remove(choiceContainer);
                }
            });
            gp.add(checkboxContainer, column, 3);
        }

        assets = new Scene (gp, 1280, 720);

        return assets;
    }

EDIT: Here is a screenshot of what I am talking about

Answer 1

You are inadvertantly setting the width of column 0 (the first column) to be the width of your text, "Please select all.. etc etc."

That's because GridPane uses the preferred width for the largest element of a column as the width of that column.

You probably want to remove the text from the GridPane and havve it be part of an HBox or VBox of which the GridPane is also an element. That feels like the most natural solution.

Either that or you're going to have to fool around with the span of the text element so the GridPane thinks it ought to span mulitple columns.

GridPanes are most natural for data that naturally can be thought of as a grid, where each column's data is similar in width. That is not what you have.

You can however force a GridPane to do almost anything with a little trial and error.

Answer 2

private Scene assets(Stage primaryStage){
                Scene assets;
                GridPane gp = new GridPane();
                gp.setVgap(0);
                //gp.setPadding(new Insets(25, 0, 25, 25));

                Text title = new Text("Assets");
                title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
                gp.add(title, 0, 0);

                Text description = new Text("Please select all assets you would like to include in your budget");
                gp.add(description, 0, 1);

                String [] optionsString = new String []{"A", "B", "C", "D", "E", "F"};
                HBox checkboxContainer = new HBox();
                checkboxContainer.setPadding(new Insets(5, 5, 5, 5));
                checkboxContainer.setSpacing(20);

                for (int i = 0; i < optionsString.length; i++) {
                    final int column = i;
                    final int row = i;
                    String option = optionsString[i];
                    CheckBox checkBox = new CheckBox(option);
                    ChoiceBox<Integer> choice = new ChoiceBox<>();
                    Label label = new Label("How many " + optionsString[i] + " options do you have?");
                    choice.getItems().addAll(1, 2, 3, 4, 5);

                    HBox choiceContainer = new HBox(label, choice);

                    checkBox.selectedProperty().addListener((o, oldValue, newValue) -> {
                        if (newValue) {
                            gp.add(choiceContainer, 0, row + 4);
                        } else {
                            gp.getChildren().remove(choiceContainer);
                        }
                    });
                    checkboxContainer.getChildren().add(checkBox);
                }
                gp.add(checkboxContainer, 0, 2);

                assets = new Scene (gp, 1280, 720);

                return assets;
            }

CheckboxContainer must be outside the for loop.