Scenebuilder Hierarchy is not working properly

Question

In SceneBuilder, I clicked on the icon option from Gluon and then my label was gone from hierarchy. Also, the button of the numbers are not showing in the hierarchy as you can see in the picture.

I tried to change the gluon theme color, but it is still the same. I also vanished the whole scenebuilder from my PC and redownloaded it and it's still the same. FXML, CSS all files have the correct code as you can see in the picture, the output is shown there. By the way, these buttons were inside the Vbox. I copied it 4 times line by line. It was all before this happened.

The Scenebuilder Label is gone from the hierarchy and button are not there.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.calculator.MainController">
    <children>
        <VBox fx:id="V" layoutX="160.0" layoutY="34.0" prefHeight="300.0" prefWidth="250.0" spacing="10.0">
            <children>
                <StackPane prefHeight="65.0" prefWidth="200.0">
                    <children>
                        <Label fx:id="result" layoutX="10.0" layoutY="20.0" prefHeight="62.0" prefWidth="237.0">
                            <font>
                                <Font size="18.0" />
                            </font>
                            <StackPane.margin>
                                <Insets bottom="5.0" top="5.0" />
                            </StackPane.margin>
                        </Label>
                    </children>
                </StackPane>

                <HBox alignment="CENTER" prefHeight="50.0" prefWidth="300.0" spacing="10.0">
                    <children>
                        <Button fx:id="seven" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="7" />
                        <Button fx:id="eight" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="8" />
                        <Button fx:id="nine" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="9" />
                        <Button fx:id="div" mnemonicParsing="false" onAction="#processOperators" prefWidth="50.0" text="/" />
                    </children>
                </HBox>
                <HBox alignment="CENTER" prefHeight="50.0" prefWidth="300.0" spacing="10.0">
                    <children>
                        <Button fx:id="four" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="4" />
                        <Button fx:id="five" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="5" />
                        <Button fx:id="six" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="6" />
                        <Button fx:id="into" mnemonicParsing="false" onAction="#processOperators" prefWidth="50.0" text="*" />
                    </children>
                </HBox>
                <HBox alignment="CENTER" prefHeight="50.0" prefWidth="300.0" spacing="10.0">
                    <children>
                        <Button fx:id="one" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="1" />
                        <Button fx:id="two" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="2" />
                        <Button fx:id="three" mnemonicParsing="false" onAction="#processNumbers" prefWidth="50.0" text="3" />
                        <Button fx:id="minus" mnemonicParsing="false" onAction="#processOperators" prefWidth="50.0" text="-" />
                    </children>
                </HBox>
                <HBox alignment="CENTER" prefHeight="50.0" prefWidth="300.0" spacing="10.0">
                    <children>
                        <Button fx:id="zero" mnemonicParsing="false" onAction="#processNumbers" prefWidth="110.0" text="0" />
                        <Button fx:id="equal" mnemonicParsing="false" onAction="#processOperators" prefWidth="50.0" text="=" />
                        <Button fx:id="plus" mnemonicParsing="false" onAction="#processOperators" prefWidth="50.0" text="+" />
                    </children>
                </HBox>
            </children>
            <HBox alignment="CENTER" spacing="10.0">
                <Button fx:id="deleteButton" mnemonicParsing="false" onAction="#handleDelete" text="C" />
                <Button fx:id="modButton" mnemonicParsing="false" onAction="#handleMod" text="Mod" />
            </HBox>
        </VBox>
    </children>
</AnchorPane>

Answer 1

Here is an example that you should be able to use to build your GUI. This example uses a GridPane

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.calculator.MainController">
   <children>
      <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0">
         <children>
            <Label alignment="CENTER_RIGHT" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" style="-fx-background-color: grey;" text="1,000">
               <VBox.margin>
                  <Insets />
               </VBox.margin>
               <font>
                  <Font size="28.0" />
               </font>
            </Label>
            <StackPane prefHeight="150.0" prefWidth="200.0">
               <children>
                  <GridPane hgap="10.0" maxHeight="-Infinity" maxWidth="-Infinity" vgap="10.0">
                     <columnConstraints>
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="25.0" prefWidth="75.0" />
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="25.0" prefWidth="75.0" />
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="25.0" prefWidth="75.0" />
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="25.0" prefWidth="75.0" />
                     </columnConstraints>
                     <rowConstraints>
                        <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
                     </rowConstraints>
                     <children>
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="7" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="8" GridPane.columnIndex="1" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="9" GridPane.columnIndex="2" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="/" GridPane.columnIndex="3" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="4" GridPane.rowIndex="1" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="*" GridPane.columnIndex="3" GridPane.rowIndex="1" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="1" GridPane.rowIndex="2" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="2" GridPane.columnIndex="1" GridPane.rowIndex="2" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="3" GridPane.columnIndex="2" GridPane.rowIndex="2" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="-" GridPane.columnIndex="3" GridPane.rowIndex="2" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="0" GridPane.columnSpan="2" GridPane.rowIndex="3" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="=" GridPane.columnIndex="2" GridPane.rowIndex="3" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="+" GridPane.columnIndex="3" GridPane.rowIndex="3" />
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="C" GridPane.columnIndex="1" GridPane.rowIndex="4">
                           <GridPane.margin>
                              <Insets />
                           </GridPane.margin>
                        </Button>
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Mod" GridPane.columnIndex="2" GridPane.rowIndex="4">
                           <GridPane.margin>
                              <Insets />
                           </GridPane.margin>
                        </Button>
                     </children>
                     <padding>
                        <Insets top="20.0" />
                     </padding>
                  </GridPane>
               </children>
            </StackPane>
         </children>
         <StackPane.margin>
            <Insets />
         </StackPane.margin>
         <padding>
            <Insets left="100.0" right="100.0" top="20.0" />
         </padding>
      </VBox>
   </children>
</StackPane>