ColumnLayout in ScrollView : fill width ?



  • Hello,

    I am trying to have a ColumnLayout in a ScrollView so that if the scrollview becomes larger the column layout and its elements will be updated too.

    I cannot find a way to do it. The columnlayout always uses the minimum width of its children.

    How can I do this ?

    PS: QtQuick.Controls 2.2

    ScrollView {
                    anchors.margins: margin
                    anchors.top: parent.top
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    clip: true
                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    
                    ColumnLayout {
                        id: listLayout
                        objectName: "listLayout"
                        Layout.fillHeight: true
                        Layout.fillWidth: true
    
                        Element {
                            status: "test"
                            id: "ID"
                        }
                        Element {
                            status: "test"
                            id: "ID"
                        }
                        Element {
                            status: "test"
                            id: "ID"
                        }
                        Element {
                            status: "test"
                            id: "ID"
                        }
                    }
                }
    


  • @rXpSwiss Controls 1 or 2?



  • @Eeli-K
    QtQuick.Controls 2.2



  • @rXpSwiss You can't use

    ScrollView {
     ColumnLayout {
        Layout.fillHeight: true
        Layout.fillWidth: true
    

    because the ColumnLayout isn't inside a Layout. Try anchors.fill: parent instead.



  • @Eeli-K
    Oh yes that was what I was using but didn't work, I am just in the phase of trying everything.
    So I retried it and columnlayout still is the size of its children, and the children are set to fill the parent.



  • Something like this?

    import QtQuick 2.9
    import QtQuick.Layouts 1.2
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        id: window
        width: 360
        height: 360
        visible: true
    
        ScrollView {
            id: scrollview
            anchors.fill: parent
    
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            ScrollBar.vertical.visible: ScrollBar.vertical.size < 1
    
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
            ScrollBar.horizontal.visible: ScrollBar.horizontal.size < 1
    
            ColumnLayout {
                spacing: 20
                width: Math.max(implicitWidth, scrollview.width)
                Repeater {
                    model: 20
                    Label {
                        text: "Something very very very loooooooong"
                        Layout.fillWidth: true
                    }
                }
            }
        }
    }


  • @jpnurmi
    Doesn't work.
    The element are not growing when I make the window larger and also, the scrollview never clip vertically, meaning that with too much element it will make my window bigger (taller).

    here is the start
    first

    When I add elements the scrollview gets bigger and do not clip
    second

    Then as you can see if I make the windows larger it doesn't change the elements
    third



  • The main purpose of the previous example was to show a simple expanding element. What you do inside that element and whether you enable clipping is up to you.

    import QtQuick 2.9
    import QtQuick.Layouts 1.2
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        id: window
        width: 360
        height: 360
        visible: true
    
        ScrollView {
            id: scrollview
            anchors.fill: parent
            anchors.margins: 60
    
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            ScrollBar.vertical.visible: ScrollBar.vertical.size < 1
    
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
            ScrollBar.horizontal.visible: ScrollBar.horizontal.size < 1
    
            clip: true
            padding: 1
    
            ColumnLayout {
                spacing: 20
                width: Math.max(implicitWidth, scrollview.availableWidth)
                Repeater {
                    model: 5
                    RowLayout {
                        // setting Layout.fillWidth for the RowLayout is technically unnecessary,
                        // because layouts have it on by default, but for the sake of clarity,
                        // if you use anything else than a layout
                        Layout.fillWidth: true
    
                        // set Layout.fillWidth for the elements inside the RowLayout to make them expand
                        Button { text: "Foo"; Layout.fillWidth: true }
                        Button { text: "Bar"; Layout.fillWidth: true }
                        Button { text: "Baz"; Layout.fillWidth: true }
                    }
                }
            }
        }
    
        Rectangle {
            border.color: "red"
            color: "transparent"
            anchors.fill: scrollview
            opacity: 0.1
        }
    }


  • @jpnurmi I agree but my issue is that clipping is enable on my side



  • The latest example has clipping enabled, too. Could you explain what is the remaining problem? If you want the ScrollView to remain at a fixed height, or constrain its height to a certain maximum, either specify the height using a binding, or if the ScrollView itself is in a layout, using Layout.maximumHeight, for instance.



  • @jpnurmi
    I want my ScrollView to take all the height by default but not extend after it.

    So this is at the start
    start

    and if I add a lot of elements
    then

    you can see that the scrollview got bigger and it even pushed the window.



  • The parent of the ScrollView is not included at all in your snippet, but as far as I can see, nothing is specifying or limiting the height in the part of the code you showed us. Therefore the ScrollView is growing infinitely to fit the content inside.

    The best way to present your problem is to give us a complete but minimal example that we can run ourselves. If you leave out essential parts, we're left guessing what else might be there, and we might even misunderstand the whole problem and basically answer to a wrong question. :)



  • @jpnurmi
    Wait, I am used to android and how it works for their interface, you are telling me that the scrollview can get modified by his children size because the parent has no fixed height ?

    The thing is that I have my window, in that a simple row layout that has 3 elements in it :
    left menu, separator, scrollview.
    Nothing is fixed size because I want the user to be able to make the windows bigger if needed and the elements to adapt to it.
    But because of my window doesn't have a fixed size you are telling me that the scrollview will never clip ?



  • @rXpSwiss Here is one incomplete example which you can modify. Something like this made by you would have helped us in the beginning and saved some typing and time... It can easily be pasted to a main.qml and there's no guesswork involved.

    import QtQuick 2.7
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.0
    
    ApplicationWindow {
        id: window
        visible: true
        RowLayout {
            anchors.fill: parent
            Button {}
            ToolSeparator {}
            ScrollView {
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                Layout.fillWidth: true
    
                clip: true
                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    
                ColumnLayout {
                    id: listLayout
                    objectName: "listLayout"
                    anchors.top: parent.top
    
                    Button {
                        width: window.width
                        Layout.fillWidth: true
                        text: "lsdjkfkl"
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    
                    }
                    Button {
                        text: "lkdfjljfuiheff"
    
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    }
                    Button{}
                    Button{}
                }
            }
        }
    }
    


  • @Eeli-K
    Thank you I see my mistake both in the scrollview and in the handling of the windows size and mainLayout size.
    Although my columnlayout in the scrolllayout does not fill the width of the scrolllayout.

    Fixed that with a simple

    width: Math.max(implicitWidth, scrollView.availableWidth)
    

    on the columnlayout


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.