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
Forum Updated to NodeBB v4.3 + New Features

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.
  • AhtiA Offline
    AhtiA Offline
    Ahti
    wrote on last edited by Ahti
    #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

    ODБOïO 1 Reply Last reply
    0
    • AhtiA Ahti

      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

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by ODБOï
      #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 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