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



  • 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
              }
            }
          }
        }
      }
    }
    
    


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


  • Qt Champions 2016

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



  • @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 :-)



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



  • @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.



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



  • @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
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    


  • @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



  • @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
    


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


Log in to reply
 

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