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

Cannot align controls properly in layouts



  • I am trying to layout some controls to right of screen with Layout.alignment: Qt.AlignRight but that don't seem to work here is my code:

    Profile.qml:

    import QtQuick 2.0
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.3
    
    Pane {
        id: profile
        padding: 0
    
        ColumnLayout {
            id: view
            anchors.fill: parent
            anchors.margins: 20
    
            ColumnLayout {
                Layout.alignment: Qt.AlignHCenter
    
                Label {
                    id: username
                    text: "Ahtisham"
                    font.pixelSize: 20
                    font.bold: true
                    font.family: "Arial"
                    Layout.alignment: Qt.AlignHCenter
                }            
                MenuSeparator {               
                    Layout.alignment: Qt.AlignHCenter
                }
            }
            RowLayout {
                id: p_layout
                width: parent.width
    
                Label {
                    id: p_label
                    text: "Phone: "
                    font.pixelSize: 13
                }
                Label {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignRight   // this doesn't align to right
                    id: phone
                    text: "987654321"
                    font.pixelSize: 13
                }
            }
            RowLayout {
                id: a_layout
                width: parent.width
    
                Label {
                    id: a_label
                    text: "Address: "
                    font.pixelSize: 13
                }
                Label {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignRight  // this doesn't align to right
                    id: address
                    text: "England"
                    font.pixelSize: 13
                }
            }
            RowLayout {
                id: d_layout
                width: parent.width
    
                Label {
                    id: d_label
                    text: "Date of Join: "
                    font.pixelSize: 13
                }
                Label {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignRight  // this doesn't align to right
                    id: date_of_join
                    text: "24-06-2010"
                    font.pixelSize: 13
                }
            }
        }
    }
    

    Actual Output:

    Capture.PNG

    Desired Output:

    new.PNG



  • hi just move the Layout.fillWidth: true from phone to p_label

        RowLayout {
                id: p_layout
                width: parent.width
    
                Label {
                    id: p_label
                    text: "Phone: "
                    font.pixelSize: 13
    Layout.fillWidth: true//<<
                }
                Label {
                    
                    Layout.alignment: Qt.AlignRight   // this doesn't align to right
                    id: phone
                    text: "987654321"
                    font.pixelSize: 13
                }
            }
    

Log in to reply