GUI control inline alignment

HI there,
i’m facing problems to align some GUI control.
In my project i have a grid with some row. In some row i have to align a TextBlock with an input: the goal is to use the TextBlock as a label for the input control, so the input control has to be aligned after the textBlock.
This is my PG:Babylon.js Playground

I try to calculate the width of the text block and then placing the input using leftInPixels, but it seems not to work.
What’s the best practice to do that?
Thank’s in advance :wink:

EDIT: i’ve added some logs: https://playground.babylonjs.com/#L3L73N#1
Why in the logged object width and widthInPixels has the right value but i read always zero?

Hi @Mercurio, maybe @msDestiny14 can help on this UI question.

1 Like

Sorry I’m having a slighty hard time figuring out what specifically you want it to look like.

If I’m interpreting it wrong please let me know! How I think you want is it some label with then the input box next to it. https://playground.babylonjs.com/#L3L73N#2 I noticed you had 2 rows and 2 columns. I changed it to 1 row with 2 columns and aligned the input on the left in the second column.

1 Like

Thank you @msDestiny14 ,

Yes it’s exactly what i want.
So i’ve always to use grid for alignment? I thought to play with widthInPixels but it reads always zero.

Is it a bug?
Thank you.

2 Likes

Where are you looking for width and widthInPixels? Don’t quite understand.

looks correct in the inspector.

Programmatically if you try to read label.widthInPixels it reads always zero.
You can try also in the last PG you have published.

Ah yes! Now I understand what you’re asking. The reason is because of text and resizeToFit. This will not be calculated until render time.

https://playground.babylonjs.com/#L3L73N#3

Modified this example to show on the engine loop gives the correct size because now it has been rendered.

1 Like

Thakyou @msDestiny14 :wink:

1 Like