Right align Button inside HBox inside .fxml file

I have this code:

public class DogApp extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent gridPane = FXMLLoader.load(getClass().getResource("Dog.fxml"));
        
        Scene scene = new Scene(gridPane, 300, 200);

        stage.setScene(scene);
        stage.setTitle("Dog bark");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
}
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>

<GridPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="DogListener"
          hgap="10" vgap="10" alignment="CENTER">
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>

    <Label text="Distance:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
    <TextField fx:id="distance" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
    
    <Label text="Paws:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField fx:id="pawsNumber" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    
    <Label text="DPP:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
    <TextField fx:id="distancePerPaw" editable = "false"
               GridPane.columnIndex="1" GridPane.rowIndex="2"/>

    <HBox GridPane.columnIndex="0" GridPane.rowIndex="3" GridPane.columnSpan="2">
        <Button text="Calculate" onAction="#calculateButtonClicked"
                alignment="BASELINE_RIGHT"/>
    </HBox>
</GridPane>

It shows:

enter image description here

I need the Calculate button to be positioned on the right side of the HBox:

enter image description here

I tried

alignment="BASELINE_RIGHT"

But it didn’t work.

Answer

Like @anko said, use <HBox alignment="BASELINE_RIGHT" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="3">

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane alignment="CENTER" hgap="10" vgap="10" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="DogListener">
    <padding>
        <Insets bottom="10" left="25" right="25" top="25" />
    </padding>

    <Label text="Distance:" GridPane.columnIndex="0" GridPane.rowIndex="0" />
    <TextField fx:id="distance" GridPane.columnIndex="1" GridPane.rowIndex="0" />
    
    <Label text="Paws:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
    <TextField fx:id="pawsNumber" GridPane.columnIndex="1" GridPane.rowIndex="1" />
    
    <Label text="DPP:" GridPane.columnIndex="0" GridPane.rowIndex="2" />
    <TextField fx:id="distancePerPaw" editable="false" GridPane.columnIndex="1" GridPane.rowIndex="2" />

    <HBox alignment="BASELINE_RIGHT" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="3">
        <Button alignment="CENTER" onAction="#calculateButtonClicked" text="Calculate" />
    </HBox>
   <columnConstraints>
      <ColumnConstraints />
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
      <RowConstraints />
      <RowConstraints />
      <RowConstraints />
   </rowConstraints>
</GridPane>

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *