There is an unexplained space between buttons

Question

I've a problem with an exercise. There is an unexplained space between the first and the second buttons on the scene. I've change the location of the buttons but still the first one has a space from the second one. What cause this and how can I make this space shorter? https://imgur.com/hYolYE2

    public void start(Stage myStage) {

        GridPane myPane = new GridPane();
        myPane.setPadding(new Insets(10, 10, 10, 10));
        myPane.setHgap(10);
        myPane.setVgap(10);

        Button btn1 = new Button("Computer Scinence");
        Button btn2 = new Button("Chemistry");
        Button btn3 = new Button("Arts");

        DrawText txt1 = new DrawText("Computer Scince","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.GREEN);
        DrawText txt2 = new DrawText("Chemistry","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.BLUE);
        DrawText txt3 = new DrawText("Arts","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.YELLOW);

        GridPane.setConstraints(btn1,0,1);
        GridPane.setConstraints(btn2,1,1);
        GridPane.setConstraints(btn3,2,1);
        GridPane.setConstraints(txt1,0,2);
        GridPane.setConstraints(txt2,0,3);
        GridPane.setConstraints(txt3,0,4);

        myPane.getChildren().addAll(btn1,btn2,btn3,txt1,txt2,txt3);

        Scene myScene = new Scene(myPane,350,190);        
        myStage.setScene(myScene);        
        myStage.setTitle("Exercise 3_3");        
        myStage.show();
    }

Answer 1

You can often debug GridPane layout issues by turning on the grid lines:

myPane.setGridLinesVisible(true);

After recreating your application (you did not include your DrawText class, so I'm just styling Labels instead) and turning on the grid lines reveals the issue:

You can see that the Computer Science Label at GridPane location 0, 1 has a greater width than the Computer Science Button . This causes the GridPane to expand the width of the first column to accommodate the Label .

You have a couple of options to resolve this, depending on how you want the layout to work.

1) Set Column Span :

If you want to keep the Computer Science Button the same size, but have the first column's width not expand to fit the Label , just have that Label span 2 columns:

GridPane.setColumnSpan(txt1, 2);

2) Increase Button Width :

If you'd like the Computer Science Button to expand to fill the rest of the column, you can set its MaxWidth property to use the maximum value:

btn1.setMaxWidth(Double.MAX_VALUE);