CODEWITHSUNDEEP
qtqml
ymoreau
ymoreau

Reputation: 4016

How to elide Text item in a layout without a fixed size?

According to the doc of Text.elide

The text will only elide if an explicit width has been set.

But what if I want my Text item to take all available space in a layout and elide the content that does not fit ?

For example, a layout with fixed-width items (icons, buttons...) and some text :

RowLayout
{
    id: _layout
    anchors.fill: parent

    Rectangle {
        color: "lightblue"
        height: 20
        width: 20
    }
    Text {
        text: "long words long words long words long words long words long words long words long words long words long words "
        elide: Text.ElideRight
    }
    Rectangle {
        color: "lightblue"
        height: 20
        width: 20
    }
}

This code will be displayed truncated if the window/container is too small, and hide the items after the text (and also will not show the ... like an elided text).

Upvotes: 1

Views: 1564

Answers (1)

derM
derM

Reputation: 13691

You have to specify how the Layout should limit the width, e.g. with:

Text {
    text: "long words long words long words long words long words long words long words long words long words long words "
    elide: Text.ElideRight

    Layout.fillWidth: true
}

See: http://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#fillWidth-attached-prop

Upvotes: 3

Related Questions