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. problems with right margin when use RowLayout
Forum Update on Monday, May 27th 2025

problems with right margin when use RowLayout

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 4 Posters 1.3k 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.
  • C Offline
    C Offline
    cdeads
    wrote on 29 Aug 2019, 15:16 last edited by
    #1

    Hello everyone! Hope you are OK)
    I have a little question about margin.
    Well now, I created simple interface. When I'm compiling and run it. All is looks like on the next screenshot0_1567090334076_3e8b6676-fc76-4c6c-9e26-961dd6fd038b-image.png
    Pay attention on right margin from buttons "Open" and right window's border - all is OK now.
    But when I'm maximizing window margin is gone: 0_1567090593588_c9674f3a-7ce9-4e22-a937-3af906d60d01-image.png

    And when I'm restoring it default size margin don't get back:
    0_1567090705639_37eead3a-3b4d-4d66-afaf-657ea0676605-image.png

    Here is a part of code what depends it:

    Rectangle {
    id: filesFieldColumn
    anchors.right: parent.right
    anchors.left: parent.left
    anchors.top: topRightSectorLabelWrapper.bottom
    anchors.bottom: parent.bottom
    anchors.topMargin: screenTools.bigMarginValue
    color: screenTools.windowLiteShadeColor

                ColumnLayout {
                     id: inputFileFieldRow
                     anchors.left: parent.left
                     anchors.right: parent.right
                     anchors.leftMargin: screenTools.bigMarginValue
                     height: implicitHeight
                     width: parent.width
                     RowLayout {
                         id: inputFileFieldLayout
                         TextField {
                             id: inputFileField
                             selectByMouse: true
                             placeholderText: qsTr("Enter path to input file")
                             font.pointSize: screenTools.defaultFontPointSize
                             height: screenTools.textFieldFixedHeight
                             Layout.fillWidth: true
                         }
                         Button {
                             id: openInputFileButton
                             text: qsTr("Open")
                             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                             Layout.fillWidth: false
                             Layout.rightMargin: screenTools.bigMarginValue
                             font.pointSize: screenTools.defaultFontPointSize
                             height: screenTools.textFieldFixedHeight
                         }
                     }
    
                     RowLayout {
                         id: outputFileFieldRow
                         TextField {
                             id: outputFileField
                             selectByMouse: true
                             placeholderText: qsTr("Enter path to output file")
                             font.pointSize: screenTools.defaultFontPointSize
                             height: screenTools.textFieldFixedHeight
                             Layout.fillWidth: true
                         }
                         Button {
                             id: openOutputFileButton
                             text: qsTr("Open")
                             Layout.rightMargin: screenTools.bigMarginValue
                             font.pointSize: screenTools.defaultFontPointSize
                             height: screenTools.textFieldFixedHeight
                         }
                      }
                }
           } 
    

    I'm using windows10, Qt Version 5.13.0, Qt Creator 4.9.2

    Please hint me if I something do wrong.
    Early thanks for your help!

    J 1 Reply Last reply 30 Aug 2019, 11:31
    0
    • I Offline
      I Offline
      IntruderExcluder
      wrote on 29 Aug 2019, 15:41 last edited by IntruderExcluder
      #2

      Just wrote a simple example. Cannot to reproduce at least under linux and Qt 5.12.3:

      ApplicationWindow {
          id: root
          width: 800
          height: 600
          visible: true
      
          ColumnLayout {
              anchors {
                  left: parent.horizontalCenter
                  right: parent.right
                  margins: 10
              }
              spacing: 10
      
              RowLayout {
                  width: parent.width; spacing: 10
                  TextField { Layout.fillWidth: true }
                  Button { text: "Test" }
              }
      
              RowLayout {
                  width: parent.width; spacing: 10
                  TextField { Layout.fillWidth: true }
                  Button { text: "Test" }
              }
      
              RowLayout {
                  width: parent.width; spacing: 10
                  TextField { Layout.fillWidth: true }
                  Button { text: "Test" }
              }
      
              RowLayout {
                  width: parent.width; spacing: 10
                  TextField { Layout.fillWidth: true }
                  Button { text: "Test" }
              }
      
              RowLayout {
                  width: parent.width; spacing: 10
                  TextField { Layout.fillWidth: true }
                  Button { text: "Test" }
              }
          }
      }
      
      

      Try to start with a small example.

      1 Reply Last reply
      1
      • D Offline
        D Offline
        Darta
        wrote on 29 Aug 2019, 17:23 last edited by
        #3

        I think your issue isn't about the margin, but with your screen,

        your margin doesn't dispear but you can't see all your rectangle since they are not really right adjusted try more to use more of items and anchors.fill: parent as much as you can for the all thing to be responsive.

        something like that maybe:

        Window
        {
            // your code of your window
            RowLayout
            {
                anchors.fill: parent
        
                Item
                {
                    Layout.preferedWidth = parent * 0.5
                    Layout.fillHeight = true
        
                    //code first column
                }
        
                Item
                {
                    Layout.preferedWidth = parent * 0.5
                    Layout.fillHeight = true
        
                    //code second column
                }
        }
        

        with this you sure you always see all of what you have

        C 1 Reply Last reply 30 Aug 2019, 07:40
        1
        • D Darta
          29 Aug 2019, 17:23

          I think your issue isn't about the margin, but with your screen,

          your margin doesn't dispear but you can't see all your rectangle since they are not really right adjusted try more to use more of items and anchors.fill: parent as much as you can for the all thing to be responsive.

          something like that maybe:

          Window
          {
              // your code of your window
              RowLayout
              {
                  anchors.fill: parent
          
                  Item
                  {
                      Layout.preferedWidth = parent * 0.5
                      Layout.fillHeight = true
          
                      //code first column
                  }
          
                  Item
                  {
                      Layout.preferedWidth = parent * 0.5
                      Layout.fillHeight = true
          
                      //code second column
                  }
          }
          

          with this you sure you always see all of what you have

          C Offline
          C Offline
          cdeads
          wrote on 30 Aug 2019, 07:40 last edited by
          #4

          @darta Yep, your advice helped for me) I've did all as you said and when I placed
          anchors.fill: parent in ColumnLayout and Layout.preferredWidth: parent * 0.5 to chillds Items, bug's gone .
          Thank you very much!
          May the force be with you)

          1 Reply Last reply
          -1
          • C cdeads
            29 Aug 2019, 15:16

            Hello everyone! Hope you are OK)
            I have a little question about margin.
            Well now, I created simple interface. When I'm compiling and run it. All is looks like on the next screenshot0_1567090334076_3e8b6676-fc76-4c6c-9e26-961dd6fd038b-image.png
            Pay attention on right margin from buttons "Open" and right window's border - all is OK now.
            But when I'm maximizing window margin is gone: 0_1567090593588_c9674f3a-7ce9-4e22-a937-3af906d60d01-image.png

            And when I'm restoring it default size margin don't get back:
            0_1567090705639_37eead3a-3b4d-4d66-afaf-657ea0676605-image.png

            Here is a part of code what depends it:

            Rectangle {
            id: filesFieldColumn
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: topRightSectorLabelWrapper.bottom
            anchors.bottom: parent.bottom
            anchors.topMargin: screenTools.bigMarginValue
            color: screenTools.windowLiteShadeColor

                        ColumnLayout {
                             id: inputFileFieldRow
                             anchors.left: parent.left
                             anchors.right: parent.right
                             anchors.leftMargin: screenTools.bigMarginValue
                             height: implicitHeight
                             width: parent.width
                             RowLayout {
                                 id: inputFileFieldLayout
                                 TextField {
                                     id: inputFileField
                                     selectByMouse: true
                                     placeholderText: qsTr("Enter path to input file")
                                     font.pointSize: screenTools.defaultFontPointSize
                                     height: screenTools.textFieldFixedHeight
                                     Layout.fillWidth: true
                                 }
                                 Button {
                                     id: openInputFileButton
                                     text: qsTr("Open")
                                     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                                     Layout.fillWidth: false
                                     Layout.rightMargin: screenTools.bigMarginValue
                                     font.pointSize: screenTools.defaultFontPointSize
                                     height: screenTools.textFieldFixedHeight
                                 }
                             }
            
                             RowLayout {
                                 id: outputFileFieldRow
                                 TextField {
                                     id: outputFileField
                                     selectByMouse: true
                                     placeholderText: qsTr("Enter path to output file")
                                     font.pointSize: screenTools.defaultFontPointSize
                                     height: screenTools.textFieldFixedHeight
                                     Layout.fillWidth: true
                                 }
                                 Button {
                                     id: openOutputFileButton
                                     text: qsTr("Open")
                                     Layout.rightMargin: screenTools.bigMarginValue
                                     font.pointSize: screenTools.defaultFontPointSize
                                     height: screenTools.textFieldFixedHeight
                                 }
                              }
                        }
                   } 
            

            I'm using windows10, Qt Version 5.13.0, Qt Creator 4.9.2

            Please hint me if I something do wrong.
            Early thanks for your help!

            J Offline
            J Offline
            J.Hilk
            Moderators
            wrote on 30 Aug 2019, 11:31 last edited by
            #5

            @cdeads
            I think your problem is actually here

                             anchors.left: parent.left
                             anchors.right: parent.right
                             anchors.leftMargin: screenTools.bigMarginValue
                             height: implicitHeight
                             width: parent.width
            

            you give it left and right anchors and a width and margins, that's conflicting and you should get a couple of console warnings during runtime at the very least


            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            1 Reply Last reply
            1

            1/5

            29 Aug 2019, 15:16

            • Login

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