Search code examples
javalayoutjavafx

JavaFX TilePane doesn't wrap the text or showing Ellipsis String

I am using a TilePane which contains a GridPane inside it and i have created it using SceneBuilder and FXML.The problem is that TilePane works very strange as the title is saying:

When the text is too big i have serious problems with the layouts cause the TilePane isn't wrapping the text or showing Ellipsis String so when i resize the window all the layouts are failing into the app.

Why this is happening with TilePane and is not working as expected inside a BorderPane?

ScreenShot:

enter image description here

Here is the fxml code:

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

<?import javafx.scene.control.ContextMenu?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>

<fx:root styleClass="smartController" type="StackPane" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <BorderPane fx:id="mainBorder" style="-fx-background-color: transparent; -fx-border-color: red;">
         <top>
            <TitledPane fx:id="titledPane" alignment="CENTER" contentDisplay="CENTER" graphicTextGap="0.0" text="I am The TilePane and i don't like wrapping the text!" wrapText="true" BorderPane.alignment="CENTER">
               <content>
                  <GridPane fx:id="topGrid" gridLinesVisible="true" hgap="5.0" style="-fx-background-color: rgb(0,0,0,0.85);;">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" percentWidth="70.0" />
                      <ColumnConstraints hgrow="SOMETIMES" minWidth="40.0" percentWidth="15.0" />
                        <ColumnConstraints hgrow="SOMETIMES" percentWidth="15.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <TextField fx:id="pageField" alignment="CENTER" maxHeight="-Infinity" maxWidth="65.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="25.0" prefWidth="50.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <tooltip>
                              <Tooltip text="current page" />
                           </tooltip>
                           <contextMenu>
                              <ContextMenu />
                           </contextMenu>
                        </TextField>
                     </children>
                  </GridPane>
               </content>
            </TitledPane>
         </top>
      </BorderPane>
   </children>
</fx:root>
Solution

  • By default TitledPane has a minWidth based on the text. For it's parent to resize the node to a smaller size, you have to manually assign a value:

    <TitledPane minWidth="0" fx:id="titledPane" alignment="CENTER" contentDisplay="CENTER" graphicTextGap="0.0" text="I am The TilePane and i don't like wrapping the text!" wrapText="true" BorderPane.alignment="CENTER">
   ...
</TitledPane>

    This can be set in the Layout section of the inspector of the TitledPane (Min Width).

    As for actually wrapping the text:

    The title part of the TitledPane is simply not large enough to allow multiple lines by default. You could change this using a css style sheet:

    #titledPane>.title {
    -fx-pref-height: 50; /* increase available area */
    -fx-alignment: top-center;
    -fx-padding: 4 4 4 30; /* increase left padding to align text */
}

#titledPane>.title>.arrow-button {
    -fx-translate-x: -20; /* move back arrow, which is also subject to the padding */
}