Misscalculations when calculating percentages inside Rectangle

[adutzu89]

Captură de ecran din 2016-12-16 20-47-37.png

Rectangle {
            id: delegateRectangle
            height: list.height
            width: list.height * 50 / 100
            color: "purple"
            Rectangle {
                id: member1
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: parent.top
                anchors.left: parent.left
                color: "blue"
            }
            Rectangle {
                id: member2
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: member1.bottom
                anchors.left: parent.left
                color: "gray"
            }
            Rectangle {
                id: member3
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: member2.bottom
                anchors.left: parent.left
                color: "red"
            }
            Rectangle {
                id: member4
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: member3.bottom
                anchors.left: parent.left
                color: "yellow"
            }
}

Rectangle {
            id: delegateRectangle
            height: list.height
            width: list.height * 50 / 100
            color: "purple"
            Rectangle {
                id: member1
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: parent.top
                anchors.left: parent.left
                color: "blue"
            }
            Rectangle {
                id: member2
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: member1.bottom
                anchors.left: parent.left
                color: "gray"
            }
            Rectangle {
                id: member3
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: member2.bottom
                anchors.left: parent.left
                color: "red"
            }
            Rectangle {
                id: member4
                height: delegateRectangle.height * 20 / 100
                width: delegateRectangle.width
                anchors.top: member3.bottom
                anchors.left: parent.left
                color: "yellow"
            }
}

To copy to clipboard, switch view to plain text mode 

I want to use percentages inside a delegate so it can easily resize when window size changes, but after seeing that the total percentages was bellow 100% and elements went outside of boundaries of the view I decided to make a basic example with rectangles and as you can see in the attached image the member4 rectangle goes outside of boundaries.
Can anyone explain me why is that? I don't see what it's missing.

[anda_skoa]

You could be hitting rounding errors.

If there is no scaling then 1 unit is one pixel, if the height calculation results in non-integer values, there will be rounding, which can add up.

Cheers,
_

[d_stranz]

You could be hitting rounding errors.

If I'm reading the code correctly, each rectangle is 20% of the height of the parent rectangle. There should be enough room for 5 of them. A 1-pixel rounding error could not possibly cause the effect shown in the figure with only 4 rectangles.

@adutzu89: Are you sure the code you posted matches the figure?

[adutzu89]

If I'm reading the code correctly, each rectangle is 20% of the height of the parent rectangle. There should be enough room for 5 of them. A 1-pixel rounding error could not possibly cause the effect shown in the figure with only 4 rectangles.

@adutzu89: Are you sure the code you posted matches the figure?

Hi d_stranz,

Yes the code is correct, that's why I felt the need to ask it here, I found it odd.
I adjusted it properly with setting the items other values, I am thinking that it the size of the list is returned as list + list header(even tough I haven't set any header).