JavaFX ScrollPane's horizontal scroll bar hides content

Question

I wrap some content into a ScrollPane because I want a horizontal scroll bar if the content does not fit on screen.

As long as the scroll bar is not needed, everything is fine:

Yet, when the scroll bar is shown, it (vertically) hides parts of the content:

How can I prevent this behavior? The content should always be shown completely. I tried to use fitToHeight="true", yet this did not help.

---

---

Following some example FXML (the multiple layers of HBox and VBox are added to mimic my real application's structure):

<BorderPane>
    <top>
        <ScrollPane vbarPolicy="NEVER" fitToHeight="true">
            <HBox>
                <VBox>
                    <TitledPane text="Title">
                        <HBox spacing="100.0">
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                            <Text text="Test1 Test2 Test3 Test4"></Text>
                        </HBox>
                    </TitledPane>
                </VBox>
            </HBox>
        </ScrollPane>
    </top>
    <center>

    </center>
    <bottom>

    </bottom>
</BorderPane>

Answer 1

I wrote a openJDK 8 version because the accepted answer only works since 9

public class ScrollPaneHSkin extends ScrollPane
{

  ScrollBar hbar;

  public ScrollPaneHSkin()
  {
    super();
  }

  public ScrollPaneHSkin(Node content)
  {
    super(content);
  }

  @Override
  protected Skin<?> createDefaultSkin()
  {
    return new HSkin();
  }


  private class HSkin extends ScrollPaneSkin
  {
    HSkin()
    {
      super(ScrollPaneHSkin.this);
      hbarPolicyProperty().addListener((ov, old, current) ->
      
        // rude .. but visibility is updated in layout anyway
        hsb.setVisible(false)
      );
    }
    
    @Override
    protected double computePrefHeight(double x, double topInset,
                                       double rightInset, double bottomInset, double leftInset)
    {
      double computed = super.computePrefHeight(x, topInset, rightInset, bottomInset, leftInset);
      if (getSkinnable().getHbarPolicy() == ScrollBarPolicy.AS_NEEDED && hsb.isVisible())
      {
        // this is fine when horizontal bar is shown/hidden due to resizing
        // not quite okay while toggling the policy
        // the actual visibilty is updated in layoutChildren?
        computed += hsb.prefHeight(-1);
      }
      return computed;
    }
  }
}

Answer 2

Looks like a bug (reported) in ScrollPaneSkin: its computePrefHeight method doesn't take the scrollBar's height into account if the policy is AS_NEEDED and the scrollBar is visible.

So the workaround is a custom skin that does ;) Note, that doing so isn't quite enough if the policy is changed from ALWAYS to AS_NEEDED (at the time of calling computeXX, the bar is visible - not quite sure why), so we are listening to changes in the policy and hide the bar .. rude but effective.

The custom skin (beware: not formally testet!) and a driver to play with:

public class ScrollPaneSizing extends Application{

    public static class DebugScrollPaneSkin extends ScrollPaneSkin {

        public DebugScrollPaneSkin(ScrollPane scroll) {
            super(scroll);
            registerChangeListener(scroll.hbarPolicyProperty(), p -> {
                // rude .. but visibility is updated in layout anyway
                getHorizontalScrollBar().setVisible(false);
            });
        }

        @Override
        protected double computePrefHeight(double x, double topInset,
                double rightInset, double bottomInset, double leftInset) {
            double computed = super.computePrefHeight(x, topInset, rightInset, bottomInset, leftInset);
            if (getSkinnable().getHbarPolicy() == ScrollBarPolicy.AS_NEEDED && getHorizontalScrollBar().isVisible()) {
                // this is fine when horizontal bar is shown/hidden due to resizing
                // not quite okay while toggling the policy
                // the actual visibilty is updated in layoutChildren?
                computed += getHorizontalScrollBar().prefHeight(-1);
            }
            return computed;
        }


    }

    private Parent createContent() {
        HBox inner = new HBox(new Text("somehing horizontal and again again ........")); 
        TitledPane titled = new TitledPane("my title", inner);
        ScrollPane scroll = new ScrollPane(titled) {

            @Override
            protected Skin<?> createDefaultSkin() {
                return new DebugScrollPaneSkin(this);
            }

        };
        scroll.setVbarPolicy(NEVER);
        scroll.setHbarPolicy(ALWAYS);
        // scroll.setFitToHeight(true);

        Button policy = new Button("toggle HBarPolicy");
        policy.setOnAction(e -> {
            ScrollBarPolicy p = scroll.getHbarPolicy();
            scroll.setHbarPolicy(p == ALWAYS ? AS_NEEDED : ALWAYS);
        });
        HBox buttons = new HBox(10, policy);
        BorderPane content = new BorderPane();
        content.setTop(scroll);
        content.setBottom(buttons);
        return content;
    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setScene(new Scene(createContent(), 400, 200));
        stage.setTitle(FXUtils.version());
        stage.show();
    }

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

    @SuppressWarnings("unused")
    private static final Logger LOG = Logger
            .getLogger(ScrollPaneSizing.class.getName());

}

Answer 3

You could work around this by setting the minHeight of your vbox to a size in which it would show the text fully alternatively you can add padding

ex.(Padding)

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.ColorPicker?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.text.Text?>
<?import javafx.geometry.Insets?>
<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <ScrollPane vbarPolicy="NEVER" fitToHeight="true">
            <HBox>
                <VBox spacing="100.0">
                    <TitledPane text="Title">
                        <HBox>
                            <children>
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                                <Text text="Test1 Test2 Test3 Test4" />
                            </children>
                        </HBox>
                    </TitledPane>
                    <padding>
                        <Insets bottom="5.0" top="5.0" />
                    </padding>
                </VBox>
            </HBox>
        </ScrollPane>
    </top>
    <center>

    </center>
    <bottom>

    </bottom>
</BorderPane>

ex. (min Height)

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

<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.*?>
<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <ScrollPane vbarPolicy="NEVER" fitToHeight="true" minHeight="83.0">
            <HBox>
                <VBox>
                    <TitledPane text="Title">
                        <HBox>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                            <Text text="Test1 Test2 Test3 Test4"/>
                        </HBox>
                    </TitledPane>
                </VBox>
            </HBox>
        </ScrollPane>
    </top>
    <center>

    </center>
    <bottom>

    </bottom>
</BorderPane>