CODEWITHSUNDEEP
javafx-8
Valeme
Valeme

Reputation: 139

How to hide Text on overflow in JavaFX?

I am creating custom file chooser in JavaFX. Here is a button group for it:

And here is an fxml file content:

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

<?import javafx.geometry.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<GridPane hgap="5.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
          minWidth="-Infinity" xmlns:fx="http://javafx.com/fxml/1"
          xmlns="http://javafx.com/javafx/8.0.131">
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="200.0"
                           prefWidth="200.0"/>
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="25.0"
                           prefWidth="25.0"/>
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="25.0"
                           prefWidth="25.0"/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints vgrow="SOMETIMES"/>
    </rowConstraints>
    <children>
        <StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
                   minWidth="-Infinity" prefHeight="25.0" prefWidth="200.0"
                   style="-fx-background-color: lightgrey;" GridPane.valignment="CENTER">
            <GridPane.margin>
                <Insets/>
            </GridPane.margin>
            <children>
                <Text stroke="BLACK" strokeType="OUTSIDE" strokeWidth="0.0"
                      text="Chosen file name" StackPane.alignment="CENTER_LEFT">
                    <StackPane.margin>
                        <Insets left="5.0"/>
                    </StackPane.margin>
                </Text>
            </children>
        </StackPane>
        <StackPane maxHeight="-Infinity" minHeight="-Infinity" prefHeight="25.0"
                   style="-fx-background-color: lightgrey;" GridPane.columnIndex="1"
                   GridPane.halignment="CENTER" GridPane.valignment="CENTER">
            <children>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="x"/>
            </children>
        </StackPane>
        <StackPane maxHeight="-Infinity" minHeight="-Infinity" prefHeight="25.0"
                   style="-fx-background-color: lightgrey;" GridPane.columnIndex="2"
                   GridPane.halignment="CENTER" GridPane.valignment="CENTER">
            <children>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="..."
                      StackPane.alignment="CENTER"/>
            </children>
        </StackPane>
    </children>
    <padding>
        <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
    </padding>
</GridPane>

When a user clicks on button (I am using Text as a button), it will show file chooser. After file chosen in should show file name. Everything works fine, but there is a problem when a file name is too long, the text is overflowing.

I want the text to be ended with "..." at the end instead of overflowing, and the size should not extend its parent size.

How to achieve this?

Upvotes: 3

Views: 1622

Answers (1)

fabian
fabian

Reputation: 82461

Use a Label instead. This automatically uses a ellipsis if the text gets too long for the available area. In contrast to Text it extends Region and therefore can be resized by the parent layout:

<?import javafx.scene.control.Label?>

...
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
           minWidth="-Infinity" prefHeight="25.0" prefWidth="200.0"
           style="-fx-background-color: lightgrey;" GridPane.valignment="CENTER">
    <GridPane.margin>
        <Insets/>
    </GridPane.margin>
    <children>
        <Label textFill="BLACK" text="Chosen file name" StackPane.alignment="CENTER_LEFT"
               ellipsisString="..." textOverrun="ELLIPSIS" wrapText="false">
            <StackPane.margin>
                <Insets left="5.0"/>
            </StackPane.margin>
        </Label>
    </children>
</StackPane>
...

Upvotes: 4

Related Questions