Creating a Scrollable VBox in JavaFx

Question

I have created a collapsible side bar by using VBox on the right of the BorderPane. In this side bar, I am displaying the source codes of the selected classes(called as bubbles) as a list, one under the other. Each bubble has 300px width and 700px height. However, when I add a new bubble to the side bar, the other bubbles in the list started to get shrinking. Instead of this, I would like to have a scrollbar in this side bar VBox. How I can achieve this?

void initSideBarActions() {
    sideBar = new SideBarView(borderPane);
    borderPane.setRight(sideBar);

    String sourceCode = "public class FXMLDocumentController implements Initializable {\n" +
            "    @FXML\n" +
            "    AnchorPane apMain;\n" +
            "\n" +
            "    @Override\n" +
            "    public void initialize(URL url, ResourceBundle rb)\n" +
            "    {\n" +
            "         BubbleShape bs = new BubbleShape(\"Hello world!\");\n" +
            "         bs.setLayoutX(50.0);\n" +
            "         bs.setLayoutY(50.0);\n" +
            "\n" +
            "         BubbleShape bs2 = new BubbleShape(\"Bye world!\");\n" +
            "         bs2.setLayoutX(400);\n" +
            "         bs2.setLayoutY(400);\n" +
            "         apMain.getChildren().addAll(bs, bs2);\n" +
            "    }\n" +
            "}";

    BubbleView bubble1 = new BubbleView(sourceCode, "SampleClassOne");
    BubbleView bubble2 = new BubbleView(sourceCode, "SampleClassTwo");
    BubbleView bubble3 = new BubbleView(sourceCode, "SampleClassThree");

    sideBar.addNewBubble(bubble1);
    sideBar.addNewBubble(bubble2);
    sideBar.addNewBubble(bubble3);
}

Here is the screenshot:

and here is the .fxml file:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.ColorPicker?>
<?import javafx.scene.layout.StackPane?>

<BorderPane fx:id="borderPane" fx:controller="com.kaanburaksener.octoUML.src.controller.ClassDiagramController" xmlns:fx="http://javafx.com/fxml">
    <top>
        <VBox>
            <ToolBar fx:id="aToolBar" orientation="HORIZONTAL">
                <HBox fx:id="umlBox">
                    <Button text="Create" fx:id="createBtn"/>
                    <Button text="Enumeration" fx:id="enumBtn"/>
                    <Button text="Package" fx:id="packageBtn"/>
                    <Button text="Edge" fx:id="edgeBtn"/>
                    <Button text="Draw" fx:id="drawBtn"/>
                </HBox>
                <HBox fx:id="utilBox">
                    <Button text="Select" fx:id="selectBtn"/>
                    <Button text="Move" fx:id="moveBtn"/>
                </HBox>
                <HBox fx:id="undoBox">
                    <Button text="Delete" fx:id="deleteBtn"/>
                    <Button text="Undo" fx:id="undoBtn"/>
                    <Button text="Redo" fx:id="redoBtn"/>
                </HBox>
                <HBox fx:id="recognizeBox">
                    <Button text="Source Code" fx:id="sourceCodeBtn"/>
                    <Button text="Recognize" fx:id="recognizeBtn"/>
                    <Button text="Voice" fx:id="voiceBtn"/>
                </HBox>
            </ToolBar>
        </VBox>
    </top>
    <bottom>
        <StackPane fx:id="infoPane">
            <ToolBar fx:id="zoomPane">
                <Pane HBox.hgrow="ALWAYS" />
                <VBox alignment="CENTER">
                    <Slider fx:id="zoomSlider" min="10"  max="200" value="100"/>
                    <Label fx:id="zoomLabel" text="Zoom" />
                </VBox>
                <Pane HBox.hgrow="ALWAYS" />
            </ToolBar>
            <ColorPicker fx:id="colorPicker" StackPane.alignment="CENTER_LEFT"/>
            <Label fx:id="serverLabel" StackPane.alignment="CENTER_RIGHT"/>
        </StackPane>
    </bottom>
    <center>
        <ScrollPane fx:id="scrollPane" pannable="true" BorderPane.alignment="CENTER">
            <content>
                <Pane fx:id="drawPane" prefHeight="8000.0" prefWidth="8000.0">
                </Pane>
            </content>
        </ScrollPane>
    </center>
</BorderPane>

Even if I have read this question (How to create a scrollable panel of components in JavaFX?) , I couldn't adapted the solution to my project.

Answer 1

Just wrap the side bar in a scroll pane. If you want it to only be able to scroll vertically, call setFitToWidth(true).

sideBar = new SideBarView(borderPane);

ScrollPane sideBarScroller = new ScrollPane(sideBar);
sideBarScroller.setFitToWidth(true);

borderPane.setRight(sideBarScroller);