How to align four buttons in one row using GridPane in JavaFx

Question

I have a gridPane which is centre aligned.But four buttons in GridPane contain gaps between. How to get rid of this? What I have done is

GridPane grid= new GridPane();
   
   grid.setAlignment(Pos.CENTER); 
    grid.setVgap(5); 
    grid.setHgap(5);
    grid.add(label1, 0, 0); 
  grid.add(tf1, 1, 0); 
  grid.add(label2, 0, 1);       
  grid.add(tf2, 1, 1); 
  grid.add(btn1,0,2);
  grid.add(btn2,1,2);
  grid.add(btn3,2,2);
  grid.add(btn4,3,2);
  //Setting size of scene 
   Scene scene = new Scene(grid, 370, 170);      
    primaryStage.setScene(scene);
    primaryStage.show();

Buttons appear as: View Image

There is a gap after two buttons. How to remove that gap?

You specifically set the buttons to have a cell in between them by adding the buttons to (0,2) (1,2) (3!,2) and (4,2). The third button should be added to (2,2) and the fourth to (3,2). — Robert, Jul 13 '20 at 10:09
Your `btn2` is in the same column as the two text fields. Since the default size of the text fields is larger than the default size of the button, there is necessarily extra space in the cell in the grid occupied by the button. You need to specify more precisely how to handle that situation. If you don't want the buttons to conform to the grid, then, e.g. put them in a `HBox` and add that `HBox` to row 2 with a column span of 4. If you do want them to be in the grid, it's not clear how you want them to behave? Make `btn2` larger? Make the text fields smaller? — James_D, Jul 13 '20 at 12:37
@Robert Note that doesn't actually make any difference, though it's weird to have a blank column. Column 2 will simply take zero width. — James_D, Jul 13 '20 at 12:38

James_D · Accepted Answer · 2020-07-13T17:26:11.933

By default in a GridPane, each column is sized to the preferred width of the widest element (and similarly, each row is sized to the preferred height of the tallest element). Since your second button is in the same column as the text fields, which are by default wider than the button, that column's width will be determined by the width of the text fields.

How you fix this depends on the actual behavior you want. If you really want the second button to be in the same column as the text fields, you can remove the gap either by making the button grow to the full width of the column:

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        
        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1);
        grid.add(btn1, 0, 2);
        grid.add(btn2, 1, 2);
        btn2.setMaxWidth(Double.POSITIVE_INFINITY);
        GridPane.setFillWidth(btn2, true);
        grid.add(btn3, 2, 2);
        grid.add(btn4, 3, 2);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}

or by making the text fields preferred size smaller (so the column's width is determined by the button):

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        tf1.setPrefColumnCount(0);
        TextField tf2 = new TextField();
        tf2.setPrefColumnCount(0);
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        
        HBox buttons = new HBox(5, btn1, btn2, btn3, btn4);

        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1);
        grid.add(btn1, 0, 2);
        grid.add(btn2, 1, 2);
        grid.add(btn3, 2, 2);
        grid.add(btn4, 3, 2);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}

Alternatively, you can make the text fields fill all three columns occupied by buttons 2-4 (using the version of the add method that takes a column and row span, as well as an index):

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        

        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0, 3, 1);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1, 3, 1);
        grid.add(btn1, 0, 2);
        grid.add(btn2, 1, 2);
        grid.add(btn3, 2, 2);
        grid.add(btn4, 3, 2);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}

Note in this last version, the width of the cell containing the labels is the same as the width of the cell containing the first button, which is probably not what you want either. Probably the best approach is to put the buttons in a HBox, and let that HBox span the full width of the grid pane (which now only has two columns):

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        
        HBox buttons = new HBox(5, btn1, btn2, btn3, btn4);

        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1);
        grid.add(buttons, 0, 2, 2, 1);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}

score -1 · Answer 2 · answered Jul 13 '20 at 13:38

-1

Try this code. I believe this small fix will do.

grid.add(btn1,0,2);
grid.add(btn2,1,2);
grid.add(btn3,2,2);
grid.add(btn4,3,2);

answered Jul 13 '20 at 13:38

Alex Bowman

1
3

well spotted - you might add a short explanation of what went wrong so that future readers don't have to compare line-by-line :) – kleopatra Jul 13 '20 at 14:25
That won't make any difference. By default an empty column will have zero width. – James_D Jul 13 '20 at 15:30

How to align four buttons in one row using GridPane in JavaFx

2 Answers2