Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. fillWidth not working for Layout in ScrollView
Forum Updated to NodeBB v4.3 + New Features

fillWidth not working for Layout in ScrollView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 2.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    sirhcybe
    wrote on last edited by sirhcybe
    #1

    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
                        }
                    }
                }
            }
        }
    }
    
    ODБOïO 1 Reply Last reply
    0
    • S sirhcybe

      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
                          }
                      }
                  }
              }
          }
      }
      
      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by ODБOï
      #2

      @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
                          }
                      }
                  }
              }
          }
      }
      
      1 Reply Last reply
      0
      • S Offline
        S Offline
        sirhcybe
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved