fillWidth not working for Layout in ScrollView



  • I am having some trouble with my QML layouts. I have a ColumnLayout inside a ScrollView and the fillWidth property does not work for it the way it does outside the ScrollView. This seems very similar to this issue:
    Re: ColumnLayout in ScrollView : fill width ?
    However, the solution there appears to work because the width of the button is set using the width of the window. I'd like to avoid this since my components are broken out into many different QML files and referencing parent elements like this would be complicated. Furthermore, it seems to break the intent of the Layout components.

    I have created a sample (below) and I expect that text2 would appear the same as text1. Instead text1 fills the whole screen (as expected) and text2 just appears with a default width. Can anyone tell me why my sample doesn't work and what I would need to do to make it work?

    import QtQuick 2.11
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.1
    
    Window {
        visible: true
        width: 640
        height: 480
        StackView {
            anchors.fill: parent
            initialItem: ColumnLayout {
                anchors.fill: parent
    
                TextField {
                    id: text1
                    Layout.fillWidth: true
                }
    
                ScrollView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
    
                    ColumnLayout {
                        anchors.fill: parent
                        TextField {
                            id: text2
                            Layout.fillWidth: true
                        }
                    }
                }
            }
        }
    }
    

    EDIT:
    I tried this without a Layout, just using anchoring positioning and am getting similar results. With this layout I am not even seeing the text2 TextField show up (but it will if I remove the anchors).

    import QtQuick 2.11
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4
    
    Window {
        visible: true
        width: 640
        height: 480
        StackView {
            anchors.fill: parent
            initialItem: Column {
                anchors.fill: parent
    
                TextField {
                    id: text1
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
    
                ScrollView {
                    anchors.left: parent.left
                    anchors.right: parent.right
    
                    Column {
                        anchors.fill: parent
                        TextField {
                            id: text2
                            anchors.left: parent.left
                            anchors.right: parent.right
                        }
                    }
                }
            }
        }
    }
    


  • @sirhcybe hi

    add Layout.preferredWidth: stack.width on the TextField

    import QtQuick 2.11
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.1
    
    Window {
        visible: true
        width: 640
        height: 480
        StackView {
            id:stack
            anchors.fill: parent
            initialItem: ColumnLayout {
                anchors.fill: parent
    
                TextField {
                    id: text1
                    Layout.fillWidth: true
                }
    
                ScrollView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
    
                    ColumnLayout {
                        anchors.fill: parent
                        TextField {
                            id: text2
                            Layout.fillWidth: true
                           Layout.preferredWidth: stack.width // add this
                        }
                    }
                }
            }
        }
    }
    


  • Thanks for the reply. I was trying to avoid a solution like that but I guess that's the only way. In the end I found giving up on using RowLayout/ColumnLayout and just setting widths on Row/Column components to work better.


Log in to reply
 

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