I have just tried updating to the latest version of BabylonJs (6.38.1) and found that my gui was broken as every section and button was placed at the top of the page over the top of each other rather than appearing after each other.
After some experimentation, I was able to narrow the changes that caused my gui to break to 6.32.1 - note that my gui is fine using Babylonjs 6.32.0.
Along with the broken gui, I also see a warning in the format of:
“Control (XXXXX) is using height in percentage mode inside a vertical StackPanel”
Note I do not see the warning in 6.32.0.
As I didn’t write the original gui code in my app, I am struggling to work out what the issue is… I also cannot create a playground as the code uses react-babylonjs for the gui.
I was hoping someone from the Babylon team could point me to the specific pull request which was part of 6.32.1 that could have caused this issue so that I can update my code based on that?
Hello! There was a change to StackPanel here: Better handling of StackPanel layout warning by carolhmj · Pull Request #14549 · BabylonJS/Babylon.js (github.com). The intention behind this change was to make the rules by which the StackPanel can calculate heights/widths a bit clearer. If you don’t specify a height to the StackPanel, it will grow with the size of its children, so if any of this children are using percentage mode, which depends on the parent, we get into a cycle. One solution would be to make the buttons heights to use pixel mode instead, as that will allow the StackPanel to compute its proper size. Another solution would be to combine the adaptHeightToChildren and resizeToFit properties on the button’s controls, so it can determine its size by the size of the button text: Babylon.js Playground (babylonjs.com)
Hope this helps and let me know if you have any more questions
Hi @carolhmj,
I managed to resolve my vertical panel issues, thanks for your help.
Unfortunately I still have horizontal panel issues. I am using a vertical panel to stack a number of elements vertically, and this now works fine. These elements are usually rows of items, so I use a horizontal stack panel for them.
Within the horizontal stack panel I can have some text and then a button, but I have found that putting text within a horizontal panel (that can always be a width of 100% of the width of the vertical panel) always generates the error:
Control (XXX) is using width in percentage mode inside a horizontal StackPanel
