vertical SplitPane

A vertical SplitPane in JavaFX splits the area top-to-bottom instead of left-to-right. The top and bottom sections are separated by a draggable divider.

Basic Vertical Split Example

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class VerticalSplitPaneExample extends Application {

    @Override
    public void start(Stage stage) {

        // Top content
        VBox topPane = new VBox(new Label("Top Section"));
        topPane.setStyle("-fx-background-color: lightblue; -fx-padding: 10;");

        // Bottom content
        VBox bottomPane = new VBox(new Label("Bottom Section"));
        bottomPane.setStyle("-fx-background-color: lightgreen; -fx-padding: 10;");

        // Create SplitPane and set vertical orientation
        SplitPane splitPane = new SplitPane();
        splitPane.setOrientation(Orientation.VERTICAL); // Vertical split
        splitPane.getItems().addAll(topPane, bottomPane);

        // Set initial divider position (0.5 = 50% top, 50% bottom)
        splitPane.setDividerPositions(0.5);

        Scene scene = new Scene(splitPane, 400, 300);
        stage.setTitle("Vertical SplitPane Example");
        stage.setScene(scene);
        stage.show();
    }

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

What happens

+-----------------------+
|       Top Section     |
|                       |
+-----------------------+ <- divider (draggable)
|     Bottom Section    |
|                       |
+-----------------------+

• Orientation.VERTICAL → splits top-bottom
• Orientation.HORIZONTAL → splits left-right

FXML Version

<SplitPane xmlns:fx="http://javafx.com/fxml" orientation="VERTICAL" dividerPositions="0.5">
    <items>
        <VBox style="-fx-background-color: lightblue; -fx-padding: 10;">
            <children>
                <Label text="Top Section"/>
            </children>
        </VBox>
        <VBox style="-fx-background-color: lightgreen; -fx-padding: 10;">
            <children>
                <Label text="Bottom Section"/>
            </children>
        </VBox>
    </items>
</SplitPane>

Use Cases for Vertical Split

• Chat apps: messages (top) + input box (bottom)
• Video apps: video preview (top) + controls/logs (bottom)
• Forms: instructions (top) + form fields (bottom)
• Monitor dashboards: top info panel + bottom details panel