[FIXED] Why is the Grid Pane getting wider when checking the checkbox

Issue

I would like to know why is the GridPane getting wider when I check the checkbox. I am setting the width of the BorderPane to be 100% of its parent the Hbox, so I can position the 2 buttons in the corners by using the left and right controls

The FXML file :

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.control.CheckBox?>

<GridPane xmlns="http://javafx.com/javafx"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="com.javafx.events.intro.Controller"
          alignment="CENTER"
          vgap="15"
          prefHeight="400.0" prefWidth="600.0">

    <!--The button will be dispatched to the event handler-->
    <TextField GridPane.rowIndex="0" GridPane.columnIndex="0" fx:id="username" onMouseClicked="#setFocus"
               onKeyReleased="#keyReleased" promptText="Name" prefWidth="220" prefHeight="40"
               style="-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%)">
        <font>
            <Font name="Arial bold" size="15"/>
        </font>

    </TextField>

    <HBox GridPane.rowIndex="1" GridPane.columnIndex="0" spacing="10" fx:id="hbox"
          style="-fx-border-style: dashed;-fx-border-color: black">

        <BorderPane  style="-fx-border-style: dashed;-fx-border-color: red" fx:id="borderPane">
            <left>
                <Button fx:id="Hello" text="Hello" onAction="#printUserName" prefWidth="60" prefHeight="25"/>
            </left>

            <right>
                <Button fx:id="Bye" text="Bye" onAction="#printUserName" prefWidth="60" prefHeight="25"/>
            </right>
        </BorderPane>

    </HBox>

    <CheckBox onMouseClicked="#showGridPaneSize" GridPane.rowIndex="2" GridPane.columnIndex="0" text="Check"/>

</GridPane>

The Controller class:

public class Controller {
    @FXML
    public TextField username;// Making reference to the text field in the FXML file using the property "fx:id"
    @FXML
    public Button Hello;
    @FXML
    public Button Bye;

    @FXML
    public BorderPane borderPane;

    @FXML
    public HBox hbox;

    @FXML
    public void initialize() {
        Hello.setDisable(true);
        Bye.setDisable(true);
       borderPane.prefWidthProperty().bind(hbox.widthProperty());

    }

    @FXML
    public void showGridPaneSize(){
        System.out.println(borderPane.widthProperty());
    }

    @FXML
    public void printUserName(ActionEvent event) {

        if (Objects.equals(username.getText(), "")) {
            System.out.println("Username is empty");
            username.setStyle("-fx-text-box-border: red ;-fx-focus-color: red ;");
        } else {
            if (event.getSource().equals(Hello))
                System.out.println("Hello " + username.getText().trim());

            else if (event.getSource().equals(Bye))
                System.out.println("Bye " + username.getText().trim());
        }
    }

    @FXML
    public void keyReleased() {

        String text = username.getText();
        boolean disabledButton = text.isEmpty() || text.trim().isEmpty();
        Hello.setDisable(disabledButton);
        Bye.setDisable(disabledButton);


    }

    @FXML
    public void setFocus() {
        username.setStyle("-fx-text-box-border: blue ;-fx-focus-color: blue ;");
    }
    
}

That's what it looks like :

Solution

As noted in comments:

Commenting out the

borderPane.prefWidthProperty().bind(hbox.widthProperty());

line makes the problem go away.

Get rid of the border pane, get rid of the binding.

Use this solution for aligning in an HBox:

• JavaFX HBox Alignment

That solution places a growable invisible spacer region between the two buttons in the HBox, so the left button is left aligned and the right button is right aligned.

Try to avoid binding for sizing purposes. It often doesn't work well with the default top-down layout algorithms and it is easy not to take some padding or other subtleties of the layout into account (as you discovered).

Answered By - jewelsea
Answer Checked By - Timothy Miller (JavaFixing Admin)