How to limit the width of the content of a ScrollPane

Question

I have a Scrollpane witch contains several TitledPanes in a VBox. I want to only scroll in vertical direction. The width of the content should be limited to the width of the ScrollPane. How can i get the TitledPane to Clip the Title when it's width is bigger than the width of the ScrollPane? In the moment the TitledPane adapts it's width to the width of the Title, independent of any maxWidth, Fit to Width or similar settings.

Fabian

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="454.0" prefWidth="260.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <ScrollPane fitToWidth="true" hbarPolicy="AS_NEEDED" hmax="1.0" pannable="false" prefHeight="200.0" prefViewportWidth="100.0" prefWidth="200.0" vbarPolicy="AS_NEEDED" AnchorPane.bottomAnchor="0.0" AnchorPane.    leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <content>
        <VBox maxWidth="200.0" prefHeight="500.0" prefWidth="480.0" spacing="5.0">
          <children>
            <TitledPane animated="false" maxWidth="200.0" text="Very long title, should be clipped. Very long title, should be clipped. " textOverrun="CLIP" wrapText="true">
              <content>
                <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="500.0" prefWidth="200.0">
                  <children>
                    <ListView prefHeight="500.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                  </children>
                </AnchorPane>
              </content>
            </TitledPane>
          </children>
          <padding>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
          </padding>
        </VBox>
      </content>
    </ScrollPane>
  </children>
</AnchorPane>

Example Image

score 0 · Answer 1 · answered Jun 09 '13 at 23:24

You can bind scrollpane's width to the titledpanes' widths. The important part here is to force the titlepane to fit exactly one restrict value by setting its both maxWidth and minWidth properties to the same value.

After defining fx:ids to appropriate controls and injecting them into the controller class:

@FXML
private ScrollPane demoScrollPane;

@FXML
private TitledPane demoTitledPane;

...
// in initialize
demoTitledPane.maxWidthProperty().bind(demoScrollPane.widthProperty().subtract(10).subtract(10));
demoTitledPane.minWidthProperty().bind(demoScrollPane.widthProperty().subtract(10).subtract(10));

First .subtract(10) is for VBox's insets (paddings).
Second .subtract(10) is for default paddings (I think) of layouts in use in your use case.
And of course accumulate them as .subtract(20) in short ;).

Ah thanks. The howl time i only tried to set the maximal width but not the minimal width. (Didn't expect that the minimal width would have an influence...) — Fabian, Jun 10 '13 at 09:36

How to limit the width of the content of a ScrollPane

1 Answers1