SizeBox height not working as intended

I’m making a HUD for my character that is going to show my abilities and health and mana bars. For that I’m using a Grid Panel with the following configuration:

  • 6 Columns : 180px, 90px, 90px, 90px, 90px, 90px
  • 3 Rows: 45px, 45px, 90px

The problem is that he player avatar is 180x180 and as you can see in the image even when I set its SizeBox to 180px the height of the image on the widget is bigger than that. There is no padding, and this only happens in the vertical value. The only solution I’ve found is to set the SizeBox height to 0 and that stops pushing the lower part of the widget down, but I’m corious as to what is making the SizeBox higher than intended.

Thanks for your help.

Select CombatHud, and tick its SizeToContent in Slot (CanvasPanelSlot) tab. Did it help?

Everything is set as SizeToContent already

But if you disable SizeToContent for CombatHud and manually punch in Size X: 630 | Size Y: 180 it lines up absolutely fine, right?

Yes but I cannot do that if the CombatHud is inside another slot

I’ve reproduced this issue on my end and it’s odd, indeed.

As a temporary measure, could you set size of the ‘another slot’ you mentioned to the desired dimensions. At the moment I’m thinking workarounds rather than solutions.

But I will post if I get to the bottom of this or anywhere closer.

The top one is with SizeToContent, the bottom without:

SizeToContent reads the Desired size of the underlying widget. If you set your rows to the same value, lets say 45, the GridPanel will report its size correctly and SizeToContent will work. We still have some space left because the big image is requesting desired 180.

The interesting part happens when the GridPanel rows are not vertically equal. You set it to 45 | 45 | 90. So the total allowed vertical space that can be taken by all rows in 180, providing you do not exceed the average for row. 180/3rows = 60.

If one of the rows is 85 for example, the GridPanel will now apply that excess (25) value to all 3 rows, splitting it between them evenly:

Not sure if this is a bug, but I feel this panel could be more flexible. Especially that this is precisely its purpose - flexibility. So there’s your answer, I think.

tl;dr: the below is fine but if you actually exceed average per row (60 in this case), the panel will report excessive size, making SizeToContent look a bit crazy.

214119-tldr.png

Easy fix: create 4 rows, make the big image span across all 4 and make the abilities span across 2. SizeToContent active result:

Great! Thanks for the investigating!