Qtcreator ui design and runtime display not same

[RyuShai]

i cant found problem here
i put 3 button on RowLlayout and expect it look like below (is in qtcreator design mode preview)

but runtime it look like this

here the code i using:

 Rectangle {
        id: toolbar
        height: 40
        color: "red" //"#cdf8ac"
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: topAccent.bottom
        RowLayout {
            anchors.topMargin: 0
            spacing: 0
            anchors.fill: parent
            height: 40
            ComboBox {
                id: displayType
                model: ["NvUniq", "Unknow", "NV"]
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter
                height: 40
                }
            }
            Button {
                id: fromDate
                property date day: new Date()
                text: "from"
            }
            Button {
                id: toDate
                property date day: new Date()
                text: "to"
            }
        }
    }

[Shrinidhi Upadhyaya]

Hi @RyuShai , i dont know how you are even getting the way you have displayed it in the runtime look as you are closing the RowLayout after the Combox box only, and then creating the other Buttons which will be by default aligned on the topLeft of the rectangle(id:toolbar or red color rectangle).

Have made few changes to meet your expected output please have a look:-

   Rectangle {
    id: toolbar

    anchors.right: parent.right
    anchors.left: parent.left
    anchors.top: topAccent.bottom
    height: 40
    color: "red" //"#cdf8ac"

    RowLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 40
        anchors.rightMargin: 40
        height: parent.height
        spacing: 40

        ComboBox {
            id: displayType
            model: ["NvUniq", "Unknow", "NV"]
            Layout.fillHeight: true
            Layout.fillWidth: true
        }

        Button {
            id: fromDate
            property date day: new Date()
            text: "from"
            Layout.fillHeight: true
            Layout.fillWidth: true
        }

        Button {
            id: toDate
            property date day: new Date()
            text: "to"
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

[RyuShai]

@Shrinidhi-Upadhyaya said in Qtcreator ui design and runtime display not same:

anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
height: parent.height

still not working, i throught some bug on qtcreator or personal machine. to night i will test on other machine

[Shrinidhi Upadhyaya]

Hi @RyuShai , can you copy paste my complete code and run it, and if possible can you attach the screenshot of the output.

[RyuShai]

@Shrinidhi-Upadhyaya
my mistake, complete code is worked, likke i expected

any idea why my code failed ?

edit again: i set from and to button filllheight and problem solved

[Shrinidhi Upadhyaya]

Hi @RyuShai , please have a look at my comments below:-

    Rectangle {
    id: toolbar

    //####Not Needed as by default the value of margins is 0
    //        anchors.rightMargin: 0
    //        anchors.leftMargin: 0
    anchors.right: parent.right
    anchors.left: parent.left
    anchors.top: topAccent.bottom
    height: 40
    color: "red" //"#cdf8ac"

    RowLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 40
        anchors.rightMargin: 40
        height: parent.height
        spacing: 40

        ComboBox {
            id: displayType
            model: ["NvUniq", "Unknow", "NV"]
            Layout.fillHeight: true
            Layout.fillWidth: true

            //####Will not work because you need to use Layout.preferredHeight: 40
            //                height: 40

        }
        //####You are closing the RowLayout here which is the biggest problem,thats why you are not getting the UI properly
 //        }

        Button {
            id: fromDate
            property date day: new Date()
            text: "from"
            //####Every component needs a height and width,so you need to set that
            Layout.fillHeight: true
            Layout.fillWidth: true
        }

        Button {
            id: toDate
            property date day: new Date()
            text: "to"
            //####Every component needs a height and width,so you need to set that
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

[RyuShai]

hi !@Shrinidhi-Upadhyaya
i dont want create topic so could i ask you thing ?

i have

Struct T{
int i;
}
T t;
t.i =1;
QList<T> list;
list.push_back(t);

how can i change t.i in list from 1 to 2 ?

[Shrinidhi Upadhyaya]

Hi @RyuShai , there is a replace function available, you can have a look into QList Documentation.
And for further doubts etc you can follow me and ping me anytime.