SelectionPanel styling

I am trying to add some space in between radio buttons and some margin with the panel, but I can’t seem to find the right way. I am trying to make the text more readable.

Demo Babylon.js Playground

I also seem to not fully understand the relationship between the mesh dimensions and the GUI control dimensions. Use the Babylon GUI - Babylon.js Documentation doesn’t seem to answer the question.

Hi TechDreamer 2,

I know what you mean; getting your GUI to look right is always a time-consuming and fiddly process, and there are so many variables to play with that it’s not always clear what’s what even from the documentation. One thing that I’ve in the past to help me edit things more visually is to look at the scene in the Inspector and use that to “discover” which are the properties I actually need to set in order to get the effect I’m going for.

The second image shows the Inspector open and “burrowed into” the GUI you want to manipulate. From this view, you’ll be able to see all the important elements in your scene, and you’ll be able to look at and even manipulate most of the properties on them. The “padding” values shown in the image, for example, are likely one of the properties you’ll want to set on your radio buttons, though they’re not the only relevant properties. You may also want to set the resolution of your AdvancedDynamicTexture, too; if it defaults to a square resolution and you put it on a rectangular plane, it might looked squished when it’s not supposed to. Best of luck!

Hi SyntheticMangus,
Thanks for the tip. I had to fix a couple of things (

  1. Set the ideal width
  2. Se the header text width

The solution is a bit ugly and I am sure there is a better solution for this.