Gui adaptWidthToChildren not working with adaptive scaling?

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.

(same with adaptHeightToChildren and horizontal stackpanel

I don’t know if this is intended/by design and I’m doing something wrong here, or if it’s a bug.

Thanks :slight_smile:

1 Like

cc @DarraghBurke

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.

1 Like

Thanks. This bug also seems to affect other container controls, e.g. the default container.

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:

  1. Compute max width, in pixels, of children
  2. 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 :slight_smile: PR will be open shortly!

edit: [GUI] use ignoreAdaptiveScaling on containers width adaptWidthToChildren or adaptHeightToChildren by darraghjburke · Pull Request #12345 · BabylonJS/Babylon.js (


Thanks for the fix. I will test it locally with the next npm update.

Edit: Just tested it, and the bug seems to be fixed. Thanks again.


Glad to hear it!