Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Wrapping Text in a vertical Flickable



  • I am trying to make a vertically-flickable Flickable of GroupBoxes with long wrapped text elements. How can I do this? Here is my qml:

    import QtQuick 2.12
    import QtQuick.Controls 2.5
    import QtQuick.Layouts 1.12
    
    Flickable {
        property int margins: 10
        
        anchors.fill: parent
        interactive: true
        contentHeight: outer.implicitHeight
        contentWidth: width
        ColumnLayout {
            id:outer
            anchors.margins: 10
            anchors.fill: parent
            GroupBox {
                title: 'One'
                Layout.fillWidth: true
                ColumnLayout {
                    id: inner
                    anchors.fill: parent
                    spacing: 10
                    CheckBox {
                        text: "Hide Interactive Process"
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                    }
                    
                    CheckBox {
                        text: "Hide Layers"
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                    }
                    
                    CheckBox {
                        text: "Hide ToolBars"
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                    }
                }
            }
            GroupBox {
                title: 'Two'
                width: parent.width
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 10
                    CheckBox {
                        text: "Hide Interactive Process"
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                    }
                    
                    CheckBox {
                        text: "Hide Layers"
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                    }
                    
                    CheckBox {
                        text: "Hide ToolBars"
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                    }
                }
            }
        }
    }
    
    
    
    


  • I figured it out. The Text element does indeed need to have its width dictated according to its container. The proper way to do this dynamically in my example is Layout.fillWidth: true.

    Further, to get Flicker.contentHeight to work without a binding loop I had to set static coordinates for the ColumnLayout inside the Flicker. See code below:

    import QtQuick 2.12
    import QtQuick.Controls 2.5
    import QtQuick.Layouts 1.12
    
    Flickable {
    
        id: root
        property int margins: 10
    
        interactive: true
        contentHeight: outer.implicitHeight + margins * 2
        contentWidth: width
    
        ColumnLayout {
            id: outer
            y: margins
            x: margins
            width: parent.width - margins * 2
            GroupBox {
                title: 'One'
                Layout.fillWidth: true
                ColumnLayout {
                    id: inner
                    anchors.fill: parent
                    spacing: 10
                    CheckBox {
                        text: "Hide Interactive Process"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide Layers"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide ToolBars"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                }
            }
            GroupBox {
                title: 'Two'
                Layout.fillWidth: true
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 10
                    CheckBox {
                        text: "Hide Interactive Process"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide Layers"
                        Layout.fillWidth: true
    
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide ToolBars"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                }
            }
        }
    }
    


  • Hi @patrickkidd , you need to set the width for the wrapMode to work.

    Sample Code:-

    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.preferredWidth: 400
                        color: "red"
                    }
    

    Note:- For more information about wrapMode[https://doc.qt.io/qt-5/qml-qtquick-text.html#wrapMode-prop]



  • @shrinidhi-upadhyaya said in Wrapping Text in a vertical Flickable:

    Hi @patrickkidd , you need to set the width for the wrapMode to work.

    Sample Code:-

    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.preferredWidth: 400
                        color: "red"
                    }
    

    Note:- For more information about wrapMode[https://doc.qt.io/qt-5/qml-qtquick-text.html#wrapMode-prop]

    I would like the root to dictate the size of the elements within it as opposed to setting an absolute width. Surely that is possible...



  • I figured it out. The Text element does indeed need to have its width dictated according to its container. The proper way to do this dynamically in my example is Layout.fillWidth: true.

    Further, to get Flicker.contentHeight to work without a binding loop I had to set static coordinates for the ColumnLayout inside the Flicker. See code below:

    import QtQuick 2.12
    import QtQuick.Controls 2.5
    import QtQuick.Layouts 1.12
    
    Flickable {
    
        id: root
        property int margins: 10
    
        interactive: true
        contentHeight: outer.implicitHeight + margins * 2
        contentWidth: width
    
        ColumnLayout {
            id: outer
            y: margins
            x: margins
            width: parent.width - margins * 2
            GroupBox {
                title: 'One'
                Layout.fillWidth: true
                ColumnLayout {
                    id: inner
                    anchors.fill: parent
                    spacing: 10
                    CheckBox {
                        text: "Hide Interactive Process"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide Layers"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide ToolBars"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                }
            }
            GroupBox {
                title: 'Two'
                Layout.fillWidth: true
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 10
                    CheckBox {
                        text: "Hide Interactive Process"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide Layers"
                        Layout.fillWidth: true
    
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                    
                    CheckBox {
                        text: "Hide ToolBars"
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                }
            }
        }
    }
    

Log in to reply