Why is the Grid Pane getting wider when checking the checkbox

Question

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 :

The issue is in the code you don't show. If you just take the fxml and load it, deleting the reference to the controller and all the `#` method references, it does not behave as your gif. That is, the issue is currently not reproducible (test system JavaFX 18+, JDK 18, Mac OS). You could provide a [mcve], if you do so, please ensure that it actually reproduces the issue. — jewelsea, Jun 13 '22 at 22:19
I also cannot reproduce the problem using only the FXML file you provided (test environment: Java/JavaFX 18.0.1, Windows 10). As suggested, please provide a [mre] that fully demonstrates the problem (and only the problem). — Slaw, Jun 13 '22 at 22:26
Commenting out the `borderPane.prefWidthProperty().bind(hbox.widthProperty());` line makes the problem go away. What are you trying to do with that line of code? — Slaw, Jun 13 '22 at 22:36
I want to set the position of the buttons in the corners of the hbox that will have the same width as the text field. But why is that line of code making the grid pane getting wider? — Starnec, Jun 13 '22 at 22:39
Then you need to account for the border width, not just directly bind the total width. — sorifiend, Jun 13 '22 at 23:36
Thank you I have removed the border pane and used a Region between the 2 buttons to set their positions to be in the corners of the Hbox — Starnec, Jun 14 '22 at 16:39

jewelsea · Accepted Answer · 2022-06-14T23:44:17.760

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).

Why is the Grid Pane getting wider when checking the checkbox

1 Answers1