Having the exact same padding in my buttons

Hello! I have several buttons (part of the BABYLON GUI) which all have a background image and a text as well. I would like my buttons to fit according to the length of the text within with some padding (just like I would do in CSS). For example, I would like to have a button saying : Click and another one saying I love tacos with a lot of cheese and beef and salsa and blablabla having the exact same spacing all around.

When I take a look at the examples in the forum or in the playgrounds, the buttons always have a fixed width or fixed height. I tried adding some padding to my buttons but it simply hide some part of the button instead of giving it some space. It seems like the padding does not work like CSS. I don’t want to change the width of the button manually according to the characters amount…

I also find this property on the Button class : adaptWidthToChildren. However, when I set this property to true, nothing seems to happen… I would have though that the width of my button would fit according to my text within.

Am I missing something? Is there a way to do this? Thanks

Did you try with the width of the text?
CanvasRenderingContext2D: measureText() method - Web APIs | MDN (mozilla.org)

You also need to set the text inside the button to resizeToFit so it adapts to the length of the characters: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

1 Like