Adjustment of contents in FlowPane

Question

I have a flowpane in center and i applied a slider effect which gets invoke on a click of button on the right (so slider moves from right to left when expanded). I have followed JewelSea slider tutorial mentioned here Slider

Now i have two different flowpanes in two different nodes. Both the flowpane contains array of labels but the only difference is, One flowpane contains scrollbar and is contained in TitlePane while the other is without scrollbar and no titlepane.

So now if i click on slider the contents in the flowpane(without scrollbar & titlepane) gets automatically adjusted but its not the same case with the flowpane containing scrollbar.

Here is relevant code for flowpane with scrollbar-

public void loadCase() {
    ScrollPane s = null;
    if (!homeController.mainTabPane.getTabs().contains(testTab)) {
        int app = 0;
        if (appareaList.size() > 0) {
            FlowPane fpTestmoduleContainer = new FlowPane();
            FlowPane example = new FlowPane();
            for (ApplicationAreas appttribute : appareaList) {
                appTestTitledPane[app] = new TitledPane();
                appTestTitledPane[app].setText(appttribute.getApplication_name());
                appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);

                /*Module loop start*/
                fpTestmoduleContainer.setHgap(10);
                fpTestmoduleContainer.setVgap(10);
               // fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);

                List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
                ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
                System.out.println("testmoduleList.size()" + testmoduleList.size());
                int i = 0;
                for (TestModuleAttribute testmattribute : testmoduleList) {
                    listTestlbs.add(new Label());
                    listTestlbs.get(i).setText(testmattribute.getModule_name());

                    listTestlbs.get(i).setAlignment(Pos.CENTER);
                    listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
                    listTestlbs.get(i).setWrapText(true);
                    listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
                    listTestlbs.get(i).setId(testmattribute.getFxnode_css());
                    Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
                    listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
                    listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
                    Tooltip testtp = new Tooltip();
                    testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
                    testtp.setWrapText(true);

                    listTestlbs.get(i).setTooltip(testtp);
                    addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
                    i = i + 1;
                }
               s = new ScrollPane();
                s.setContent(fpTestmoduleContainer);
                fpTestmoduleContainer.setPrefWidth(1500);
                fpTestmoduleContainer.getChildren().addAll(listTestlbs);
                //appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
                listTestlbs.clear();
                app = app + 1;
            }
            appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
            appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
            testTab.setText("Test Cases Wizard");
            testTab.setText("Testing Application Foot Print");
        //mainTab.setClosable(true);

            // testTab.getContent().setVisible(true);
            HBox hb = new HBox();

            testTab.setContent(s);

            }
    }
}

Image of slider working as expected - before sliding

After sliding (without scrollbar) the 4 modules get to the next row as space is occupied by the slider

After adding scrollpane and embedding flowpane inside it. Slider overlaps the flowpane contents as shown

I want to know why the scrollbar causing issue in auto adjustment of contents inside the flowpane and how can i fix it ?

Answer 1

Here the width of your scrollpane is fixed. And then so is the width of the flow pane.You need to change the size of your scrollpane so that its content gets reset. Use the following code.

scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);

This code will set the size of scrollpane according to the view. The flowpane will also adjust accordingly then.