Hi,
I’m trying to setup my gui to always scale up/down correctly by using the adaptive scaling feature as described here:
Since some elements, e.g. StackPanel, require width/heigth in pixel, I’m using a default resolution where I setup everything in pixel values, and babylonjs should scale up or down all controls automatically on window resize and other resolutions.
In this playground example I’ve got two buttons inside a stack panel with adaptWidthToChildren enabled, but the stackpanel and the buttons seem to resize independently. When scaling down, the width of the stackpanel is smaller than the button width, resulting in cutting of parts of the buttons. When scaling up, the width of the stackpanel is bigger than the width of the buttons.
This is definitely a bug. If we set the width of the stack panel directly, it scales correctly. Thanks for catching this! I will take a look into it and hope to have a fix in by Monday.
Hey, apologies for the late update - I was actually out of office on Monday. I have identified the cause of the issue.
adaptWidthToChildren is implemented as follows:
Compute max width, in pixels, of children
Set our width in pixels to the max width
The issue is that the children’s widths have already had the idealWidth/idealHeight scaling applied to them, but then we re-apply it to the parent as well. Essentially, we’re accounting for the rescaling twice.
I’m thinking now about the best solution to this problem. The easiest hack would be to apply the reverse of the adaptive scaling after the width of all children is computed, but that doesn’t feel like the right approach. I’ll keep you posted on what I come up with.
Ah, looks like we already have a ignoreAdaptiveScaling property on our Unit class. We can just turn that on for controls using adapt{_}ToChildren PR will be open shortly!
