JavaFX/FXML: ImageView and labels inside BorderPane not displayed

Question

My problem is that in the following construct, the bold marked images and labels inside a BorderPane inside a GridPane inside a... aren't displayed. I placed the images and labels inside another BorderPane so each row of the GridPane has more styling options. When only some of the labes are inside a BorderPane, then all labels (both those by themselves and those inside a BorderPane) are displayed but now that all are inside their individual BorderPanes, none are displayed. Setting prefHeight for the BorderPanes didn't make a difference. Any ideas?

Edit: marking something bold doesn't seem to work in a code field. I'm talking about everything on GridPane.rowIndex="0".

Thanks in advance!

example.fxml

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.TilePane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.control.CheckBox?>

<BorderPane fx:controller="examplePackage.exampleController" xmlns:fx="http://javafx.com/fxml">

<VBox>
    <TitledPane>
<!-- ................................................................................... -->
        <graphic>
            <BorderPane prefWidth="1312">
                <left>
                    <BorderPane>
                        <left>
                            <ImageView>
                                <Image url="file:///....png"/>
                            </ImageView>
                        </left>
                        <right>
                            <Label text="Text" style="-fx-padding:5"></Label>
                        </right>
                    </BorderPane>
                </left>
                <center> 
                </center>
                <right>
                    <BorderPane>
                        <left>
                            <StackPane prefWidth="32">
                                <ImageView>
                                    <Image url="file:///....png"/>
                                </ImageView>
                            </StackPane>
                        </left>
                        <right>
                            <StackPane prefWidth="28" style="-fx-padding:0,5,0,5; -fx-border-width:0px 0px 0px 0.5px; -fx-border-style: solid; -fx-border-color:#ffffff">
                                <ImageView>
                                    <Image url="file:///....png"/>
                                </ImageView>
                            </StackPane>
                        </right>
                    </BorderPane>
                </right>
            </BorderPane>
        </graphic>
<!-- ................................................................................... -->
        <GridPane>
            <columnConstraints>
                <ColumnConstraints percentWidth="5.0"/>
                <ColumnConstraints percentWidth="25.0"/>
                <ColumnConstraints percentWidth="25.0"/>
                <ColumnConstraints percentWidth="25.0"/>
                <ColumnConstraints percentWidth="20.0"/>
            </columnConstraints>

            <BorderPane prefHeight="30" GridPane.rowIndex="0" GridPane.columnIndex="0" style="-fx-border-color: rgb(0,0,0); -fx-border-width:0px 0px 0.5px 0px">
                <ImageView>
                    <Image url="file:///....png"/>
                </ImageView>
            </BorderPane>

            <BorderPane GridPane.rowIndex="0" GridPane.columnIndex="1" style="-fx-border-color: rgb(0,0,0); -fx-border-width:0px 0px 0.5px 0px">
            <Label text="Text">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            </BorderPane>

            <BorderPane GridPane.rowIndex="0" GridPane.columnIndex="2" style="-fx-border-color: rgb(0,0,0); -fx-border-width:0px 0px 0.5px 0px">
            <Label text="Text">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            </BorderPane>

            <BorderPane GridPane.rowIndex="0" GridPane.columnIndex="3" style="-fx-border-color: rgb(0,0,0); -fx-border-width:0px 0px 0.5px 0px">
            <Label text="Text">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            </BorderPane>

            <BorderPane GridPane.rowIndex="0" GridPane.columnIndex="4" style="-fx-border-color: rgb(0,0,0); -fx-border-width:0px 0px 0.5px 0px">
            <Label text="Text">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            </BorderPane>

            <Label text="Text" GridPane.rowIndex="1" GridPane.columnIndex="0">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            <Label text="Text" GridPane.rowIndex="1" GridPane.columnIndex="1">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            <Label text="Text" GridPane.rowIndex="1" GridPane.columnIndex="2">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>
            <Label text="Text" GridPane.rowIndex="1" GridPane.columnIndex="3">
                <font>
                <Font name="Arial" size="13"></Font>
                </font>
            </Label>

        </GridPane>
<!-- ................................................................................... -->
    </TitledPane>
</VBox>
</BorderPane>

exampleController.java

package examplePackage;

public class exampleController
{

}

Main.java

package examplePackage;

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)
    {
        try {
            Parent root = FXMLLoader.load(getClass().getResource("example.fxml"));
            primaryStage.setScene(new Scene(root, 1920,800));
            primaryStage.setTitle("exampleTitle");
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    public static void main(String[] args)
    {
        launch(args);
    }
}

Answer 1

The problem was that I placed the labels directly inside the border pane without "" tags to specify their alignment.

Wrong:

<BorderPane GridPane.rowIndex="0" GridPane.columnIndex="1">
    <Label text="Text">
        <font>
            <Font name="Arial" size="13"></Font>
        </font>
    </Label>
</BorderPane>

Right:

<BorderPane GridPane.rowIndex="0" GridPane.columnIndex="1">
    <left>
        <Label text="Text">
            <font>
                <Font name="Arial" size="13"></Font>
            </font>
        </Label>
    </left>
</BorderPane>
```