Misscalculations when calculating percentages inside Rectangle

[adutzu89]

12248


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"
}
}

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