title: How do I set up two vertical split panes so that dragging each will not affect the other?
body: <p>I am trying to set up a UI with three split panes. The first two are vertical panes, on the left and right side of the screen. One side of each split has a title pane. The user can select items from these panes to include in fields in the central pane. There is also a horizontal pane at the bottom that is not relevant to this question. </p>
  
  <p>The user can open these side panes either by dragging the vertical dividers, or by clicking on the relevant toggle button (Films, Books etc.) to show that pane. </p>
  
  <p>The issue I have is that I want to make it so that dragging one vertical divider does not move the other. However, since I cannot find a way to set this up without putting one of the vertical split panes into the other vertical pane, this always results in a situation where moving one of the dividers also moves the other. In the case of the below code for instance, moving the vertical divider for the left-hand (Films) split pane moves the right-hand vertical divider. </p>
  
  <p>Can anyone help with this?</p>
  
  <pre><code>package pane2;
  
  import javafx.event.EventHandler;
  import javafx.geometry.Orientation;
  import javafx.application.*; 
  import javafx.beans.property.DoubleProperty;
  import javafx.collections.FXCollections;
  import javafx.collections.ObservableList;
  import javafx.stage.*; 
  import javafx.scene.*; 
  import javafx.scene.layout.*; 
  import javafx.scene.control.*; 
  import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.control.TitledPane;
  import javafx.scene.input.*;
  import javafx.stage.Stage;
  
  public class Pane2 extends Application {
  
  SplitPane rightSplit;
  DoubleProperty rightSplitDividerPos;
  TitledPane books;
  ToggleButton selectBooks;
  VBox booksBox;
  VBox centre;
  
  SplitPane leftSplit;
  DoubleProperty leftSplitDividerPos;
  TitledPane films;
  ToggleButton selectFilms;
  VBox filmsBox;
  VBox centreLeft;
  
  SplitPane mainSplit;
  DoubleProperty mainSplitDividerPos;
  TitledPane arts;
  ToggleButton selectArts;
  VBox artsBox;
  
  BorderPane root;
  
  
  public static void main(String[] args) 
  { 
      launch( args); 
  } 
  
   @Override
      public void start(Stage primaryStage) {
          primaryStage.setTitle("Test");
  
          //Create right-hand titled pane for the books list and centre it in Vbox
          books = new TitledPane();
          books.setText("Books");
          books.setMinWidth(0);
          booksBox = new VBox(0,books);
  
          //Create central pane and add toggle buttons to open hidden panes on the
          //left, right, and bottom (films, books, and arts respectively)
          selectBooks = new ToggleButton("Books");
          selectFilms = new ToggleButton("Films");
          selectArts = new ToggleButton("Arts");
          centre = new VBox(100,selectBooks,selectFilms,selectArts);
          centre.setPrefWidth(1300);
          centre.setPrefHeight(750);
  
          //Create split pane to divide the central pane and books list
          rightSplit = new SplitPane();
          rightSplit.getItems().addAll(centre,booksBox);
  
          //Create left-hand titled pane for the films list and centre it in VBox
          films = new TitledPane();
          films.setText("Films");
          films.setMinWidth(0);
          filmsBox = new VBox(0,films);
  
          //Create split pane to divide the films list and the central pane
          leftSplit = new SplitPane();
          leftSplit.getItems().addAll(filmsBox,rightSplit);
  
          //Create mainSplit pane
          arts = new TitledPane();
          arts.setText("arts");
          arts.setMinHeight(0);
          artsBox = new VBox(0,arts);
          mainSplit = new SplitPane();
          mainSplit.setOrientation(Orientation.VERTICAL);
          mainSplit.getItems().addAll(leftSplit,artsBox);
  
          root = new BorderPane();        
          root.setCenter(mainSplit);
  
        //Set divider positions for the three dividers
          rightSplitDividerPos = rightSplit.getDividers().get(0).positionProperty();
          rightSplitDividerPos.set(1.0);
          leftSplitDividerPos = leftSplit.getDividers().get(0).positionProperty();
          leftSplitDividerPos.set(0.0);   
          mainSplitDividerPos = mainSplit.getDividers().get(0).positionProperty();
          mainSplitDividerPos.set(1.0);   
  
          //Start up scene and stage
          Scene scene = new Scene(root);
              primaryStage.setScene(scene);
              primaryStage.setMaximized(true);
              primaryStage.show();
  
          //Event - if the books toggle button is selected, the left divider will
          //move to the right to show the books selection pane
          selectBooks.setOnAction(event -&gt; {
                  if(selectBooks.isSelected()){
                  leftSplitDividerPos.set(0.15);
                  }
                  if(!selectBooks.isSelected()){
                  leftSplitDividerPos.set(0.0);
  
                  }else{
  
                  }
  
          });
  
        //Event - if the films toggle button is selected, the right divider will
          //move to the left to show the films selection pane
          selectFilms.setOnAction(event -&gt; {
              if(selectFilms.isSelected()){
                  rightSplitDividerPos.set(0.8);
              }
              if(!selectFilms.isSelected()){
                  rightSplitDividerPos.set(1.0);
  
              }else{
  
              }
  
          });
  
        //Event - if the arts toggle button is selected, the bottom divider will
          //move up to show the arts selection pane
          selectArts.setOnAction(event -&gt; {
              if(selectArts.isSelected()){
                  mainSplitDividerPos.set(0.75);
              }
              if(!selectArts.isSelected()){
                  mainSplitDividerPos.set(1.0);
  
              }else{
  
              }
  
          });    
  
      }
  </code></pre>
  
  <p>}</p>