1

I have a ScrollPane control with left and right parts inside. Left part contains a GridPane control. I would like to make the GridPane across the entire width of the parent VBox control.

For this purpose, I used a columnConstraints. Now, the GridPane is full-width, but the scrolling is broken. How can I fix it?

Please try the following sample with and without using the columnConstraints and you will see what I mean.

sample.FXML:

<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.text.Text?>

<ScrollPane fx:controller="sample.Controller"
            xmlns:fx="http://javafx.com/fxml"
            fitToWidth="true"
            fitToHeight="true">
    <HBox>
        <AnchorPane fx:id="leftPane"
                    minWidth="500"
                    prefWidth="500"
                    maxWidth="500"
                    style="-fx-background-color: orange">
            <VBox style="-fx-background-color: lime"
                  AnchorPane.topAnchor="0"
                  AnchorPane.leftAnchor="0"
                  AnchorPane.rightAnchor="0"
                  AnchorPane.bottomAnchor="10">
                <GridPane fx:id="gridPane"
                          style="-fx-background-color: brown">
                    <columnConstraints>
                        <ColumnConstraints />
                        <!-- This causes the trouble! -->
                        <ColumnConstraints hgrow="ALWAYS" />
                    </columnConstraints>
                </GridPane>
                <Label>Left Content</Label>
            </VBox>
        </AnchorPane>
        <AnchorPane fx:id="rightPane"
                    HBox.hgrow="ALWAYS"
                    style="-fx-background-color: purple">
            <Text>Right Content</Text>
        </AnchorPane>
    </HBox>
</ScrollPane>

with the corresponding Controller.java:

    public class Controller implements Initializable {
    @FXML
    private GridPane gridPane;
    private String[] splittedText;

    @Override
    public void initialize(URL location, ResourceBundle resources) {    
        // From Wikipedia
        final String text = "Dolphins are a widely distributed and diverse group of aquatic mammals. They are an informal grouping within the order Cetacea, excluding whales and porpoises, so to zoologists the grouping is paraphyletic. The dolphins comprise the extant families Delphinidae (the oceanic dolphins), Platanistidae (the Indian river dolphins), Iniidae (the new world river dolphins), and Pontoporiidae (the brackish dolphins). There are 40 extant species of dolphins. Dolphins, alongside other cetaceans, belong to the clade Cetartiodactyla with even-toed ungulates.";
        splittedText = text.split(" ");

        for (int i = 0; i < 20; ++i) {
            gridPane.add(new Text(Integer.toString(i)), 0, i);
            gridPane.add(createFlowPane(), 1, i);
        }
    }

    private FlowPane createFlowPane() {
        FlowPane flowPane = new FlowPane();
        for (int i = 0; i < splittedText.length; ++i)
            flowPane.getChildren().add(new Text(splittedText[i]));

        return flowPane;
    }
}
David
  • 527
  • 1
  • 8
  • 21
  • You mean that the ScrollPane do not react to the content? (ScrollBars not not grow) ? – Bo Halim Dec 27 '16 at 23:12
  • 1
    How do you call a `ScrollPane` that resizes it's contents to the width AND height of the viewport? `StackPane` for the extravagant? – fabian Dec 28 '16 at 00:12
  • @BoHalim Exactly. – David Dec 28 '16 at 10:01
  • @fabian The combination of the `ScrollPane` {fitToWidth="true", fitToHeight="true"} and exchange the `AnchorPane` for the the `StackPane` works. Do you create an answer from this comment? I will accept it. – David Dec 28 '16 at 10:08
  • @fabian I'm just confused as to why the `StackPane` saved the situation and `AnchorPane` makes trouble. – David Dec 28 '16 at 10:12
  • 1
    @David That was not what I tried to tell you. If you make both directions of the content fit to the viewport, you do not need a `ScrollPane` since this will make sure no `ScrollBar`s are visible (provided the content is resizeable of course). Probably `fitToHeight="true"` should be removed or replaced with `fitToHeight="false"`. – fabian Dec 28 '16 at 10:23
  • 1
    @fabian, I also thought about this but I tried by keeping both method (`fitToHeight / fitToWidth`) to (true) and it worked (After the `Nodes` in the `HBox` have reached the minimum width on the horizontal line), it's weird, for a `Pane` it would not have worked but I think that some **Built-in Layout Panes** (`HBox/VBox`) Ignore these two methods ! – Bo Halim Dec 28 '16 at 10:38
  • @fabian @BoHalim Actually, it is really weird. You are right, `fitToHeight="true"` is in this case nonsense. `fitToHeight="false"` with the `AnchorPane` makes at the bottom big space (not only `AnchorPane.bottomAnchor="10"`). `fitToHeight="false"` with the `StackPane` works as I expected. – David Dec 28 '16 at 11:38

0 Answers0