JavaFX isn't repositioning (on-resize) properly

Question

I'm quite new to JavaFX.. I tried making a simple GUI but it didn't turn out right.

Here's how it looks in SceneBuilder: https://imgur.com/a/3aJefh4
and here in the actual app: https://imgur.com/a/JpszR9m

If I resize it smaller the button will just disappear.. If I resize it bigger it would be fine.
Sorry if I didn't explain this well..

---

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

---

Controller.java

package sample;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Controller {
    @FXML private Button logoutButton;
    @FXML private AnchorPane scene;
    Stage stage;

    public void logout() {
        stage = (Stage) scene.getScene().getWindow();
        stage.close();
    }
}

---

sample.fxml

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane alignment="center" hgap="10" maxHeight="-Infinity" maxWidth="-Infinity" vgap="10" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <columnConstraints>
      <ColumnConstraints />
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
      <RowConstraints />
   </rowConstraints>
   <children>
      <AnchorPane fx:id="scene" prefHeight="300.0" prefWidth="500.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
         <children>
            <Button fx:id="logoutButton" layoutX="224.0" layoutY="138.0" mnemonicParsing="false" onAction="#logout" text="Logout" />
         </children>
      </AnchorPane>
   </children>
</GridPane>

Answer 1

To summarize what many of the comments were mentioning, notice in your SceneBuilder image on the bottom left you have a GridPane, and in that GridPane (in one of the cells) you put an AnchorPane. I assume your button lies on the AnchorPane.

AnchorPanes follow a ruling where its children (the button) are assigned exact pixel coordinates, hence, if that pixel is out of view, (the pane is too small) the button will not be visible. This is not what you want. In order to get around this, a new container should be used (as commenters suggested).

I suggest you delete your GridPane (thus everything) to rather drag an drop a BorderPane in the place of where your GridPane was. You will notice that the BorderPane has a center area (as well as top, left, bottom, and right areas)

Place your button in this center area, and try running again. As the BorderPane resizes, the button should move to fit the same relative position.