JavaFX: Empty window is displayed on first attempt - javafx

Question

Preface: Newbie into Javafxml
My application is working perfectly. I just have one issue that I know should have a very simple solution, but I can't come up with anything more.
When i run my application, i get an empty window.
Empty Window
I have to resize the window in order to get the required
Resized Window
#FXML
void invoice(ActionEvent event) throws IOException {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("/view/Invoice2.fxml"));
Parent planner;
try {
planner = (Parent) loader.load();
stage.setTitle("Order Details");
stage.getScene().setRoot(planner);
} catch (IOException e) {
e.printStackTrace();
}
}
FXML CODE:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<TitledPane collapsible="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1200.0" text="Invoice" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controllers.InvoiceController">
<content>
<AnchorPane prefHeight="200.0" prefWidth="200.0">
<children>
<SplitPane dividerPositions="0.08355795148247978" layoutX="166.0" layoutY="108.0" orientation="VERTICAL" prefHeight="374.0" prefWidth="598.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0" styleClass="body-default" stylesheets="#main.css" SplitPane.resizableWithParent="false">
<children>
<Button fx:id="back" layoutX="20.0" layoutY="14.0" mnemonicParsing="false" onAction="#BackButton" prefHeight="37.0" prefWidth="79.0" styleClass="btn-default" stylesheets="#main.css" text="Back" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="14.0" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<SplitPane dividerPositions="0.7078260869565217" layoutX="158.0" layoutY="29.0" prefHeight="283.0" prefWidth="577.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<TableView fx:id="invoicelisttb1" layoutX="71.0" layoutY="14.0" prefHeight="281.0" prefWidth="404.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columns>
<TableColumn fx:id="order" prefWidth="148.0" text="Order No." />
<TableColumn fx:id="name" prefWidth="167.0" text="Name" />
<TableColumn fx:id="price" prefWidth="173.0" text="Price" />
</columns>
</TableView>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" SplitPane.resizableWithParent="false">
<children>
<Label layoutX="14.0" layoutY="44.0" prefHeight="31.0" prefWidth="91.0" styleClass="bold" stylesheets="#main.css" text="Order No:" AnchorPane.rightAnchor="233.0" />
<TextField fx:id="txtorder" editable="false" layoutX="197.0" layoutY="44.0" prefHeight="25.0" prefWidth="83.0" AnchorPane.rightAnchor="58.0" />
<Label layoutX="14.0" layoutY="91.0" prefHeight="31.0" prefWidth="77.0" styleClass="bold" stylesheets="#main.css" text="Price:" AnchorPane.rightAnchor="246.0" />
<TextField fx:id="txtprice" layoutX="197.0" layoutY="91.0" prefHeight="25.0" prefWidth="83.0" AnchorPane.rightAnchor="58.0" />
<Button fx:id="btnprice" layoutX="196.0" layoutY="160.0" mnemonicParsing="false" onAction="#enterPrice" prefHeight="31.0" prefWidth="113.0" styleClass="btn-default" stylesheets="#main.css" text="Enter Price" AnchorPane.rightAnchor="58.0" />
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
</content>
</TitledPane>

Answer 1

After working on it for days, I finally solved it by simply putting the entire fxml's structure in another Anchor Pane. I don't know why that solved it or how that solved it, but when I wrapped the entire GUI in Anchor Pane, it started working fine.

Answer 2

Try the following:
try {
Parent planner = FXMLLoader.load(getClass().getResource("/view/Invoice2.fxml"));
stage.setTitle("Order Details");
stage.setScene(new Scene(planner));
} catch (IOException e) {
e.printStackTrace();
}
Instead of stage.getScene().setRoot(planner) I have used stage.setScene(new Scene(planner));.

Answer 3

Instead of loader.setLocation(getClass().getResource("/view/Invoice2.fxml")); change the resource to "../view/Invoice2.fxml". This will work if your project directory structure is something like this:
project
|
\_ view
| |
| \_ Invoice2.fxml
\_ main
\_ Main.java
The "../path" indicates that the selected path is in the same parent directory, not inside our current directory.