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. Layout-Problems: Items are bigger than the Layout-Space
Forum Updated to NodeBB v4.3 + New Features

Layout-Problems: Items are bigger than the Layout-Space

Scheduled Pinned Locked Moved Solved QML and Qt Quick
11 Posts 4 Posters 4.6k Views 1 Watching
  • 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.
  • T Offline
    T Offline
    topse
    wrote on last edited by
    #1

    Hi,
    I have a problem with Items within Layouts. I want to create the following layout:
    0_1510254698500_Error.png

    Explanation:
    There is a Headline and then in the second row there are two pictures, each with short description, and a Text-Element between. Picture shows expected behaviour.

    What I get:
    0_1510254669474_Error_Screen.png

    As you can see, the pictures are not sized correctly.

    Explanation to the following source:

    • The Rectangles are placeholders for the images
    • Without colored Rectangles and directly the pictures -> same problem

    Has anyone an idea, why the RowLayout exceeds the width of the outer ColumnLayout??

    Thanks and Best Regards,
    Tobias

    import QtQuick 2.8
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    
    Window {
      visible: true
      width: 640; height: 480
      title: qsTr("Hello World")
    
      Rectangle {
        id: rootArea
        anchors.fill: parent
    
        border.color: "red"; border.width: 2
    
        ColumnLayout {
          anchors.fill: parent
    
          Text {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredHeight: parent.height/6
            text: qsTr("Headline")
            minimumPixelSize: 12; font.pixelSize: 50; fontSizeMode: Text.Fit
          }
    
          RowLayout {
            Layout.fillWidth: true; Layout.fillHeight: true
    
            ColumnLayout {
              Layout.fillWidth: true; Layout.fillHeight: true
    
              Rectangle {
                Layout.fillWidth: true; Layout.fillHeight: true
                color: "yellow"
              }
              Text {
                Layout.preferredHeight: parent.height/10
                Layout.alignment: Qt.AlignCenter
                text: qsTr("Description")
                minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                horizontalAlignment: Qt.AlignHCenter
              }
            }
    
            Text {
              id: vsText
              Layout.preferredWidth: rootArea.width/6
              Layout.preferredHeight: rootArea.height/6
              Layout.alignment: Qt.AlignHCenter
              text: qsTr("+")
              minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
              horizontalAlignment: Qt.AlignHCenter
            }
    
            ColumnLayout {
              Layout.fillWidth: true; Layout.fillHeight: true
    
              Rectangle {
                Layout.fillWidth: true; Layout.fillHeight: true
                color: "blue"
              }
    
              Text {
                Layout.preferredHeight: parent.height/10
                Layout.alignment: Qt.AlignCenter
                text: qsTr("Description")
                font.pixelSize: 62; minimumPixelSize: 12; fontSizeMode: Text.Fit
                horizontalAlignment: Qt.AlignHCenter
              }
            }
          }
        }
      }
    }
    
    
    E 2 Replies Last reply
    0
    • T topse

      Hi,
      I have a problem with Items within Layouts. I want to create the following layout:
      0_1510254698500_Error.png

      Explanation:
      There is a Headline and then in the second row there are two pictures, each with short description, and a Text-Element between. Picture shows expected behaviour.

      What I get:
      0_1510254669474_Error_Screen.png

      As you can see, the pictures are not sized correctly.

      Explanation to the following source:

      • The Rectangles are placeholders for the images
      • Without colored Rectangles and directly the pictures -> same problem

      Has anyone an idea, why the RowLayout exceeds the width of the outer ColumnLayout??

      Thanks and Best Regards,
      Tobias

      import QtQuick 2.8
      import QtQuick.Window 2.2
      import QtQuick.Layouts 1.3
      
      Window {
        visible: true
        width: 640; height: 480
        title: qsTr("Hello World")
      
        Rectangle {
          id: rootArea
          anchors.fill: parent
      
          border.color: "red"; border.width: 2
      
          ColumnLayout {
            anchors.fill: parent
      
            Text {
              Layout.alignment: Qt.AlignHCenter
              Layout.preferredHeight: parent.height/6
              text: qsTr("Headline")
              minimumPixelSize: 12; font.pixelSize: 50; fontSizeMode: Text.Fit
            }
      
            RowLayout {
              Layout.fillWidth: true; Layout.fillHeight: true
      
              ColumnLayout {
                Layout.fillWidth: true; Layout.fillHeight: true
      
                Rectangle {
                  Layout.fillWidth: true; Layout.fillHeight: true
                  color: "yellow"
                }
                Text {
                  Layout.preferredHeight: parent.height/10
                  Layout.alignment: Qt.AlignCenter
                  text: qsTr("Description")
                  minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                  horizontalAlignment: Qt.AlignHCenter
                }
              }
      
              Text {
                id: vsText
                Layout.preferredWidth: rootArea.width/6
                Layout.preferredHeight: rootArea.height/6
                Layout.alignment: Qt.AlignHCenter
                text: qsTr("+")
                minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                horizontalAlignment: Qt.AlignHCenter
              }
      
              ColumnLayout {
                Layout.fillWidth: true; Layout.fillHeight: true
      
                Rectangle {
                  Layout.fillWidth: true; Layout.fillHeight: true
                  color: "blue"
                }
      
                Text {
                  Layout.preferredHeight: parent.height/10
                  Layout.alignment: Qt.AlignCenter
                  text: qsTr("Description")
                  font.pixelSize: 62; minimumPixelSize: 12; fontSizeMode: Text.Fit
                  horizontalAlignment: Qt.AlignHCenter
                }
              }
            }
          }
        }
      }
      
      
      E Offline
      E Offline
      Eeli K
      wrote on last edited by
      #2

      @topse The Image code would be important to see, not just the Rectangle. Image type behaves differently than Rectangle. You could try fillMode.

      T 1 Reply Last reply
      0
      • ekkescornerE Offline
        ekkescornerE Offline
        ekkescorner
        Qt Champions 2016
        wrote on last edited by
        #3

        I remember one case where I had to set the available width as Layout.maximumWidth and minimumWidth to RowLayout

        ekke ... Qt Champion 2016 | 2024 ... mobile business apps
        5.15 --> 6.9 https://t1p.de/ekkeChecklist
        QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

        T 1 Reply Last reply
        0
        • E Eeli K

          @topse The Image code would be important to see, not just the Rectangle. Image type behaves differently than Rectangle. You could try fillMode.

          T Offline
          T Offline
          topse
          wrote on last edited by
          #4

          @Eeli-K Yeah ok... I realized that too. But Layout does same problem with rectangle as with Image -- so I thought Rectangle would be easier to reproduce if anyone wants to :-)

          1 Reply Last reply
          0
          • ekkescornerE ekkescorner

            I remember one case where I had to set the available width as Layout.maximumWidth and minimumWidth to RowLayout

            T Offline
            T Offline
            topse
            wrote on last edited by
            #5

            @ekkescorner I also tried that... and it got even more interesting... the Rectangles got a left padding :-/

            J.HilkJ 1 Reply Last reply
            0
            • T topse

              @ekkescorner I also tried that... and it got even more interesting... the Rectangles got a left padding :-/

              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by
              #6

              @topse
              I have some issues with the QML-Layout item as well, it never works out fo the box and always has some issues .
              That might be just me or QML-Layout is not yet where its supposed to be, or a comibnation of both.

              However since I moved from Layout.fillWidth: to implicitWidth I have far less trouble.

              for example this is from actuall code: A logo img placed in a RowLayout: with 1 other item, a custom button

              RowLayout{
                          id: headerLayout
                          anchors.fill: parent
              
                          MenuButton{
                              id: btnShowHide
                              Layout.alignment: Qt.AlignLeft
                              implicitHeight: headerLayout.height
                              implicitWidth: headerLayout.height
              
                              srcNormal: "images/Menu_Icon.png"
                              srcPressed:"images/Menu_Icon_pressed.png"
              
                              onClicked: root.isVisible = !root.isVisible
                          }
              
                          Item {
                              id: logoContainer
                              Layout.alignment:  Qt.AlignRight
              
                              implicitHeight: headerLayout.height
                              implicitWidth:  headerLayout.width-headerLayout.height
                              Image{
                                  id: headerLogo
                                  anchors.fill: parent
                                  anchors.topMargin: 10
                                  anchors.bottomMargin: 10
              
                                  source: "images/LogoMain.png"
                                  fillMode: Image.PreserveAspectFit
                              }
                          }
                      }
              

              hopefully this can help you.


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              T 1 Reply Last reply
              0
              • J.HilkJ J.Hilk

                @topse
                I have some issues with the QML-Layout item as well, it never works out fo the box and always has some issues .
                That might be just me or QML-Layout is not yet where its supposed to be, or a comibnation of both.

                However since I moved from Layout.fillWidth: to implicitWidth I have far less trouble.

                for example this is from actuall code: A logo img placed in a RowLayout: with 1 other item, a custom button

                RowLayout{
                            id: headerLayout
                            anchors.fill: parent
                
                            MenuButton{
                                id: btnShowHide
                                Layout.alignment: Qt.AlignLeft
                                implicitHeight: headerLayout.height
                                implicitWidth: headerLayout.height
                
                                srcNormal: "images/Menu_Icon.png"
                                srcPressed:"images/Menu_Icon_pressed.png"
                
                                onClicked: root.isVisible = !root.isVisible
                            }
                
                            Item {
                                id: logoContainer
                                Layout.alignment:  Qt.AlignRight
                
                                implicitHeight: headerLayout.height
                                implicitWidth:  headerLayout.width-headerLayout.height
                                Image{
                                    id: headerLogo
                                    anchors.fill: parent
                                    anchors.topMargin: 10
                                    anchors.bottomMargin: 10
                
                                    source: "images/LogoMain.png"
                                    fillMode: Image.PreserveAspectFit
                                }
                            }
                        }
                

                hopefully this can help you.

                T Offline
                T Offline
                topse
                wrote on last edited by
                #7

                @J.Hilk Looks like a workaround I did not try yet -- Thanks I will do :-)

                1 Reply Last reply
                0
                • T topse

                  Hi,
                  I have a problem with Items within Layouts. I want to create the following layout:
                  0_1510254698500_Error.png

                  Explanation:
                  There is a Headline and then in the second row there are two pictures, each with short description, and a Text-Element between. Picture shows expected behaviour.

                  What I get:
                  0_1510254669474_Error_Screen.png

                  As you can see, the pictures are not sized correctly.

                  Explanation to the following source:

                  • The Rectangles are placeholders for the images
                  • Without colored Rectangles and directly the pictures -> same problem

                  Has anyone an idea, why the RowLayout exceeds the width of the outer ColumnLayout??

                  Thanks and Best Regards,
                  Tobias

                  import QtQuick 2.8
                  import QtQuick.Window 2.2
                  import QtQuick.Layouts 1.3
                  
                  Window {
                    visible: true
                    width: 640; height: 480
                    title: qsTr("Hello World")
                  
                    Rectangle {
                      id: rootArea
                      anchors.fill: parent
                  
                      border.color: "red"; border.width: 2
                  
                      ColumnLayout {
                        anchors.fill: parent
                  
                        Text {
                          Layout.alignment: Qt.AlignHCenter
                          Layout.preferredHeight: parent.height/6
                          text: qsTr("Headline")
                          minimumPixelSize: 12; font.pixelSize: 50; fontSizeMode: Text.Fit
                        }
                  
                        RowLayout {
                          Layout.fillWidth: true; Layout.fillHeight: true
                  
                          ColumnLayout {
                            Layout.fillWidth: true; Layout.fillHeight: true
                  
                            Rectangle {
                              Layout.fillWidth: true; Layout.fillHeight: true
                              color: "yellow"
                            }
                            Text {
                              Layout.preferredHeight: parent.height/10
                              Layout.alignment: Qt.AlignCenter
                              text: qsTr("Description")
                              minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                              horizontalAlignment: Qt.AlignHCenter
                            }
                          }
                  
                          Text {
                            id: vsText
                            Layout.preferredWidth: rootArea.width/6
                            Layout.preferredHeight: rootArea.height/6
                            Layout.alignment: Qt.AlignHCenter
                            text: qsTr("+")
                            minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                            horizontalAlignment: Qt.AlignHCenter
                          }
                  
                          ColumnLayout {
                            Layout.fillWidth: true; Layout.fillHeight: true
                  
                            Rectangle {
                              Layout.fillWidth: true; Layout.fillHeight: true
                              color: "blue"
                            }
                  
                            Text {
                              Layout.preferredHeight: parent.height/10
                              Layout.alignment: Qt.AlignCenter
                              text: qsTr("Description")
                              font.pixelSize: 62; minimumPixelSize: 12; fontSizeMode: Text.Fit
                              horizontalAlignment: Qt.AlignHCenter
                            }
                          }
                        }
                      }
                    }
                  }
                  
                  
                  E Offline
                  E Offline
                  Eeli K
                  wrote on last edited by
                  #8

                  @topse

                  import QtQuick 2.8
                  import QtQuick.Window 2.2
                  import QtQuick.Layouts 1.3
                  
                  Window {
                      visible: true
                      width: 640; height: 480
                      title: qsTr("Hello World")
                  
                      Rectangle {
                          id: rootArea
                          anchors.fill: parent
                  
                          border.color: "red"; border.width: 2
                  
                          ColumnLayout {
                              anchors.fill: parent
                  
                              Text {
                                  Layout.alignment: Qt.AlignHCenter
                                  Layout.preferredHeight: parent.height/6
                                  text: qsTr("Headline")
                                  minimumPixelSize: 12; font.pixelSize: 50; fontSizeMode: Text.Fit
                              }
                  
                              Item {
                                  Layout.fillWidth: true; Layout.fillHeight: true
                  
                                  RowLayout {
                                      anchors.fill: parent
                  
                                      Item {
                                          Layout.fillWidth: true; Layout.fillHeight: true
                  
                                          ColumnLayout {
                                              anchors.fill: parent
                  
                                              Rectangle {
                                                  Layout.fillWidth: true; Layout.fillHeight: true
                                                  color: "yellow"
                                                  border.color: "teal"
                                              }
                                              Text {
                                                  Layout.preferredHeight: parent.height/10
                                                  Layout.alignment: Qt.AlignCenter
                                                  Layout.fillWidth: true
                                                  text: qsTr("Description")
                                                  minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                                                  horizontalAlignment: Qt.AlignHCenter
                                              }
                  
                                          }
                                      }
                  
                                      Text {
                                          id: vsText
                                          Layout.preferredWidth: rootArea.width/6
                                          Layout.preferredHeight: rootArea.height/6
                                          Layout.alignment: Qt.AlignHCenter
                                          text: qsTr("+")
                                          minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                                          horizontalAlignment: Qt.AlignHCenter
                                      }
                  
                                      Item {
                                          Layout.fillWidth: true; Layout.fillHeight: true
                                          ColumnLayout {
                                              anchors.fill:parent
                  
                                              Rectangle {
                                                  Layout.fillWidth: true; Layout.fillHeight: true
                                                  color: "blue"
                                                  border.color: "yellow"
                                              }
                                              Text {
                                                  Layout.preferredHeight: parent.height/10
                                                  Layout.alignment: Qt.AlignCenter
                                                  Layout.fillWidth: true
                                                  text: qsTr("Description")
                                                  font.pixelSize: 62; minimumPixelSize: 12; fontSizeMode: Text.Fit
                                                  horizontalAlignment: Qt.AlignHCenter
                                              }
                                          }
                                      }
                                  }
                              }
                          }
                      }
                  }
                  
                  T 1 Reply Last reply
                  0
                  • E Eeli K

                    @topse

                    import QtQuick 2.8
                    import QtQuick.Window 2.2
                    import QtQuick.Layouts 1.3
                    
                    Window {
                        visible: true
                        width: 640; height: 480
                        title: qsTr("Hello World")
                    
                        Rectangle {
                            id: rootArea
                            anchors.fill: parent
                    
                            border.color: "red"; border.width: 2
                    
                            ColumnLayout {
                                anchors.fill: parent
                    
                                Text {
                                    Layout.alignment: Qt.AlignHCenter
                                    Layout.preferredHeight: parent.height/6
                                    text: qsTr("Headline")
                                    minimumPixelSize: 12; font.pixelSize: 50; fontSizeMode: Text.Fit
                                }
                    
                                Item {
                                    Layout.fillWidth: true; Layout.fillHeight: true
                    
                                    RowLayout {
                                        anchors.fill: parent
                    
                                        Item {
                                            Layout.fillWidth: true; Layout.fillHeight: true
                    
                                            ColumnLayout {
                                                anchors.fill: parent
                    
                                                Rectangle {
                                                    Layout.fillWidth: true; Layout.fillHeight: true
                                                    color: "yellow"
                                                    border.color: "teal"
                                                }
                                                Text {
                                                    Layout.preferredHeight: parent.height/10
                                                    Layout.alignment: Qt.AlignCenter
                                                    Layout.fillWidth: true
                                                    text: qsTr("Description")
                                                    minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                                                    horizontalAlignment: Qt.AlignHCenter
                                                }
                    
                                            }
                                        }
                    
                                        Text {
                                            id: vsText
                                            Layout.preferredWidth: rootArea.width/6
                                            Layout.preferredHeight: rootArea.height/6
                                            Layout.alignment: Qt.AlignHCenter
                                            text: qsTr("+")
                                            minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit
                                            horizontalAlignment: Qt.AlignHCenter
                                        }
                    
                                        Item {
                                            Layout.fillWidth: true; Layout.fillHeight: true
                                            ColumnLayout {
                                                anchors.fill:parent
                    
                                                Rectangle {
                                                    Layout.fillWidth: true; Layout.fillHeight: true
                                                    color: "blue"
                                                    border.color: "yellow"
                                                }
                                                Text {
                                                    Layout.preferredHeight: parent.height/10
                                                    Layout.alignment: Qt.AlignCenter
                                                    Layout.fillWidth: true
                                                    text: qsTr("Description")
                                                    font.pixelSize: 62; minimumPixelSize: 12; fontSizeMode: Text.Fit
                                                    horizontalAlignment: Qt.AlignHCenter
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    T Offline
                    T Offline
                    topse
                    wrote on last edited by
                    #9

                    @Eeli-K Thank you very much! Thats the solution. I have to do a closer look now on how you repaired it :-)

                    Best Regards,
                    Tobias

                    E 1 Reply Last reply
                    0
                    • T topse

                      @Eeli-K Thank you very much! Thats the solution. I have to do a closer look now on how you repaired it :-)

                      Best Regards,
                      Tobias

                      E Offline
                      E Offline
                      Eeli K
                      wrote on last edited by
                      #10

                      @topse IMO it's a bug in Qt. Layouts are Items but when put directly as children of another Layout they behave differently than other Items, or the parent Layout handles them differently. It's unexpected, unintuitive and undocumented. The solution is to wrap child Layouts inside Items:

                      ColumnLayout{
                          Item {
                              Layout.fillWidth: true; Layout.fillHeight: true
                              RowLayout {
                                  anchors.fill: parent
                      
                      1 Reply Last reply
                      0
                      • T Offline
                        T Offline
                        topse
                        wrote on last edited by
                        #11

                        I do now... thanks for that solution. I agree -- this may not be a feature...

                        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