Problems to align a Javafx button

Question

Newbie to JavaFX here. I'm currently working on a JavaFX project. I somehow managed to create my main window with a text, a textfield and two buttons:

However, I have some trouble positionning a button where I exactly want it to be (the red-filled box)

Output example

Here's part of my launch method (only the code related to the buttons). Please note that grid is a private GridPane attribute.

this.grid = new GridPane();
this.grid.setPadding(new Insets(15));
this.grid.setVgap(2);
this.grid.setHgap(2);
this.grid.setAlignment(Pos.CENTER);

Button submitButton = new Button("Submit");
submitButton.setStyle("-fx-font: 20 arial; -fx-base: #b6e7c9; -fx-background-radius: 10, 10, 10, 10;");
submitButton.setBackground(new Background(new BackgroundFill(Color.LIGHTGREEN, null, null)));

Button exitButton = new Button("Exit");

exitButton.setTextFill(Color.RED);
exitButton.setStyle("-fx-font: 20 arial; -fx-base: #dbd8d6; -fx-background-radius: 10, 10, 10, 10;");
exitButton.setBackground(new Background(new BackgroundFill(Color.RED, null, null)));

this.grid.add(submitButton, 0, 2);
this.grid.add(exitButton, 1, 2);

How can I manage to align the Exit button more to the left, to be symetrical with the Submit button, i.e. just under the TextField? I really appreciate your help.

EDIT1: The question (Text) is at 0,0. The TextField is at 0,1.

EDIT2 Code for Text and TextField:

    TextField answer = new TextField();
    answer.autosize();
    this.answer = answer.getText();
    this.grid.add(answer, 0, 1);

    Text question = new Text("Hi there ! Press Submit to start! Exit to quit.");
    question.setFont(Font.font("Century Gothic", FontWeight.BOLD, 22));
    question.setFill(Color.BLACK);
    this.grid.add(question, 0, 0);

Do you want the Exit button just beside Submit or just below the end of the TextField? — ItachiUchiha
I assume that the TextField is in (0,1). Your exit button is in (1, 2), which is why it is not aligned. It is in a separate column. To align, you may have to wrap the buttons in something else, and set the submit align left, while exit align right. — Hypnic Jerk
Create a "vbox", put the 2 buttons into, and then the vbox in the grid in (0,2) ;) — azro
Don't create a VBox. That way, madness lies. Just make the text field occupy two cells, make the first button align to the left of its cell, and the second button align to the right of its cell. — Dawood ibn Kareem
Don't use an additional layout, such as a VBox (though I think you really meant HBox???). Set the column span of the text and text field to 2, i.e. grid.add(text, 0, 0, 2, 1); and grid.add(textField, 0, 1, 2, 1);. Then the buttons should be fine as they are. [Edt] your question to include the code that adds the text and text field and it will be easier to provide a complete answer. — James_D

James_D James_D · Accepted Answer · 2016-12-21T20:55:56

Make the text and text field span two columns:

TextField answer = new TextField();
answer.autosize();
this.answer = answer.getText();

// node, columnIndex, rowIndex, columnSpan, rowSpan:
this.grid.add(answer, 0, 1, 2, 1);

Text question = new Text("Hi there ! Press Submit to start! Exit to quit.");
question.setFont(Font.font("Century Gothic", FontWeight.BOLD, 22));
question.setFill(Color.BLACK);
this.grid.add(question, 0, 0, 2, 1);

and then make the "Exit" button right-aligned, and it should work the way you want:

this.grid.add(submitButton, 0, 2);
this.grid.add(exitButton, 1, 2);
GridPane.setHalignment(exitButton, HPos.RIGHT);

Problems to align a Javafx button

1 Answers