CODEWITHSUNDEEP
qtqml
baduhai
baduhai

Reputation: 11

Label word wrap in RowLayout with other elements

I have two elements inside of a RowLayout, which I'm trying to fit within the boundaries of my window.

Page {
    id: settingsView
    anchors.fill: parent
    ColumnLayout {
        Layout.fillWidth: true
        RowLayout {
            Layout.fillWidth: true
            Label {
                text: "This is some long sample text which will definitely be wider than the page width."
                padding: 6
                Layout.maximumWidth: parent.width - timeComboBox.width
                verticalAlignment: timeComboBox.height * 0.5
                wrapMode: Label.WordWrap
            }
            ComboBox {
                id: timeComboBox
                model: ["1", "2", "3"]
            }
        }
    }
}

This page gets pushed onto a StackView(the StackView also anchors.fill: parent), but no matter what I do, I cannot make it so that the Label text gets wrapped, and the ComboBox ends up half outside the window boundaries.

Upvotes: 0

Views: 578

Answers (2)

folibis
folibis

Reputation: 12874

You have several problem points, I've correct them a bit:

Page {
    id: settingsView
    anchors.fill: parent
    ColumnLayout {
        width: parent.width // this item is not inside Layout so can't have Layout.* attached properties
        RowLayout {
            Layout.fillWidth: true 
            Label {
                text: "This is some long sample text which will definitely be wider than the page width."
                padding: 10
                Layout.fillWidth: true // just fill all the space except the ComboBox
                verticalAlignment: Text.AlignVCenter // that should be enum, not numerical value
                wrapMode: Text.WordWrap // this is Text.* emum, not Label's one
            }
            ComboBox {
                id: timeComboBox
                model: ["1", "2", "3"]
            }
        }
    }
}

Upvotes: 2

baduhai
baduhai

Reputation: 11

It turns out that the answer was quite simple, all I had to do was remove Layout.maximumWidth: parent.width - timeComboBox.width and replace it with Layout.fillWidth: true

Upvotes: 1

Related Questions