Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Forum Updated on Feb 6th

    Solved problems with right margin when use RowLayout

    QML and Qt Quick
    4
    5
    471
    Loading More Posts
    • 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
      cdeads last edited by

      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.Hilk 1 Reply Last reply Reply Quote 0
      • IntruderExcluder
        IntruderExcluder last edited by IntruderExcluder

        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 Reply Quote 1
        • D
          Darta last edited by

          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 Reply Quote 1
          • C
            cdeads @Darta last edited by

            @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 Reply Quote -1
            • J.Hilk
              J.Hilk Moderators @cdeads last edited by

              @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

              Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


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

              1 Reply Last reply Reply Quote 1
              • First post
                Last post