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

problems with right margin when use RowLayout



  • 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!



  • 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.



  • 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



  • @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)


  • Moderators

    @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


Log in to reply