Problem with GUI and control's padding

Questions
1

Hi there,
i’ve an issue with GUI and control’s padding.
I’ve made a textblock inside a rectangle for transparency purpouse: all work fine but i’ve a problem when i use control’s padding.
This is my PG: https://playground.babylonjs.com/#2YVEPB#1

As you can see i try to set the position of the control bottom-right, but if i change the paddingBottom parameter it doesn’t behave like espected. Forthermore, it seems to change the control dimension (you can try changing r.paddingBottom = value).
What could be the problem?
Thanks

2

Adding @Evgeni_Popov who knows the GUI pretty well

3

The padding values are paddings between the control and its parent, but they are setup so that the final width/height of the control is unchanged. So, if control height = 100px and you have padding top and bottom = 20px, then the usable height of your control is 60px.

As your height is in pct, you should use a paddingBottom in pct too but with a smaller value, like 5% for eg:

https://playground.babylonjs.com/#2YVEPB#3

Or use values in pixels:

https://playground.babylonjs.com/#2YVEPB#4

2 Likes
4

Thank you very much,
so, if I’ve anderstood, the issue is that it’s not possible to mix different units for sizes: if I define a dimension in pct I always have to use it in pct, is it right?

5

No, you can mix them, but it can be more difficult to see what’s going on.

1 Like