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. Cannot align controls properly in layouts
QtWS25 Last Chance

Cannot align controls properly in layouts

Scheduled Pinned Locked Moved Solved QML and Qt Quick
layoutsqml
3 Posts 3 Posters 2.2k 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.
  • A Offline
    A Offline
    Ahti
    wrote on 8 Feb 2020, 19:40 last edited by Ahti 2 Aug 2020, 19:49
    #1

    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

    what is a signature ?? Lol

    O 1 Reply Last reply 8 Feb 2020, 21:09
    0
    • A Ahti
      8 Feb 2020, 19:40

      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

      O Offline
      O Offline
      ODБOï
      wrote on 8 Feb 2020, 21:09 last edited by ODБOï 2 Aug 2020, 21:10
      #2

      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
                  }
              }
      
      1 Reply Last reply
      2
      • A Offline
        A Offline
        Allie TheProgrammer Moosa
        wrote on 17 Aug 2022, 12:47 last edited by
        #3

        @ODБOï said in Cannot align controls properly in layouts:

        Layout.fillWidth: true
        This worked for me, thanks

        1 Reply Last reply
        1

        • Login

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