Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Not filling full column height in ColumnLayout



  • I have a simple QML design that consists of 2 components side by side then another component (named HUD) below that. The HUD should fill the remaining height but instead it leaves a gap.

    How can I make HUD fill all the available width. I am trying to achieve the 2nd image.

    enter image description here

    enter image description here

    Page {
        width: parent.width
        height: parent.height
    
        title: qsTr("Home")
    
        ColumnLayout {
            anchors.fill: parent
    
            RowLayout {
                Layout.fillWidth: true;
    
                StatusBar {
                    width: parent.width * 0.5;
                    height: parent.height * 0.1
                    anchors.left: parent.left;
                }
    
                MenuBar {
                    width: parent.width * 0.5;
                    height: parent.height * 0.1
                    anchors.right: parent.right;
                }
            }
    
            // The below should fill the remaining height but its not?
            HUD {
                Layout.fillWidth: true;
                Layout.fillHeight: true;
            }
    
        }
    }
    


  • @eragon
    Hi,
    Try layout parameters like below.

     ColumnLayout {
            anchors.fill: parent
            Item{
            Layout.preferredHeight: parent.height * 0.1
            Layout.preferredWidth:parent.width
            RowLayout {
                id:r
                anchors.fill:parent
                StatusBar {
                    Layout.preferredWidth: parent.width * 0.5;
                    Layout.preferredHeight: parent.height
                }
    
                MenuBar {
                    Layout.preferredWidth: parent.width * 0.5;
                    Layout.preferredHeight: parent.height
                }
            }
            }
    
            // The below should fill the remaining height but its not?
            HUD {
                Layout.fillWidth: true;
                Layout.fillHeight: true;
                Layout.alignment: Qt.AlignTop
            }
    
        }
    

  • Qt Champions 2017

    As shown by the @CKurdu when you are using the Layouts, use preferredWidth & preferred Height properties. Avoid making mix and match like the above.


Log in to reply