Hello world!
I’m currently working on an app and I would like to add some margin to some children (Images, TextBlock, StackPanel) of my GUI panel. I noticed that I can easily position the parent with the top and left properties. However, when I’m trying to position a single child inside, these properties do not seem to work.
Am I doing something wrong? Is there a solution for this issue?
Thanks in advance!
A repro in the playground of what you tried would be great, it is really hard to know what is going on without it.
cc @carolhmj in case they know simply from the description ?
You can position them only in the axis perpendicular to the panel direction: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com), Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com). But you can add a spacing between them with the spacing property: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)
The spacing property is the solution. Thanks!
However, since the spacing property is a fixed value, I think that the grid system would be a better solution due to the fact that you can easily have a specific cell size.
Yes, I always do my layout like this when I want to master it and then, master it on resize. ‘Floating’ controls are clearly not a good idea if you ask me.
Either use the grid or a container (i.e. rectangle to constrain your controls, especially the textBlock). Using a rectangle (within the grid or within a stackpanel) you can set your internal padding (similar to margin) and you can do so with either pixels or percentage. In fact, the margin the way we understand it from css is actually not part of the BJS 2D GUI, so you have to find a workaround (using one of the above technique).
Edit: forgot to mention, did you take a look at the ‘GUI Editor’?
It helps a lot understanding what you can do and cannot do when working with imbrication of containers and controls. In fact, now that I read the title of your post a bit better, there is an ez way to set an ‘inner margin’ for controls and containers inside a stackpanel (or any container). I.E.: If expressed in percentage mode, you can create a stackpanel of 100% width and height. And for any children added to this stackpanel, simply set a width and/or height lesser than the stackpanel. Next use alignment to have your margin equal on all side or to force to the left, top, right, bottom. Again, the GUI Editor is a great tool to quickly check these kind of things (even if in the end you choose to go with code).
Is there a way to update the item in my grid, by that I mean : Change the current object contain in a certain cell (column, row) into another one.
You can remove and readd it