Understanding GUI paddingLeftInPixels

Questions
1

I want to build a toggle slider that has a second rectangle that I can programmaticaly position over to the right or left. The following code using leftInPixels works fine so I don’t have a problem but initially I was trying to use paddingLeftInPixels which was not working as expected and would result in the rectangle disappearing. What’s going on here? Why does it appear to be cropped at the center line?

Top 5 use leftInPixels, bottom 5 use paddingLeftInPixels

image
image886×864 46.7 KB

2

cc @RaananW and @carolhmj our GUI gurus :slight_smile:

1 Like
3

That’s because of the way paddingLeftInPixels work. leftInPixels will move the element but padding left in pixels will add a padding but keep the element’s width. Here is your playground with a slight change:

Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

1 Like