Bug with Thunkable Layout Heights

Hi Team,

I’ve encountered another layout issue on Android and I’ve put together a very simple test app to demonstrate it.

The app contains a Layout at the top of the screen, top aligned with a height of 200px and a 1px border. Inside that Layout are four stacked Containers:

  • Red = 50px
  • Green = 50px
  • Purple = 50px
  • Blue = 50px

Together they add up exactly to the Layout height of 200.

I’ve also added labels which display the height of each Container and the total Layout height so we can see what Thunkable thinks the dimensions are.

When I press the Expand button, the app adds 50 to both the red Container and the Layout itself. So the red Container becomes 100 and the Layout becomes 250. Since both values increase by the same amount, the Containers should continue to perfectly fill the Layout.

This is exactly what happens on the iPhone and in the PC Live Test environment:

However, on both the Android Live App and exported APKs, the Layout visually grows much larger than expected and leaves a large blank area at the bottom:

The strange part is that all of the measurements still appear to be correct:

Red: 100
Green: 50
Purple: 50
Blue: 50
Layout: 250

The numbers add up perfectly, yet there is clearly a large empty area inside the Layout.

What’s even more confusing is that the gap grows as the Layout grows. The larger the Layout becomes, the larger the discrepancy becomes.

To me this looks like the Layout is being rendered at a different height than the height reported by the Height blocks. In other words, the visual Layout and the values returned by the blocks appear to be drifting apart.

Has anyone else seen this behaviour, or can anyone from the Thunkable team explain why the Layout is visually larger than the dimensions being reported by the blocks?

The project I’m working on currently involves multiple layers of expanding layouts and so being unable to reliably resize a layout and the components within it is a big roadblock to completion.

Thank you for the detailed explanation and example. Let me test this out and see what is going on.

Thanks Brian.

I have found a temporary workaround which may also help explain what is happening.

It looks like on Android, Layouts are being scaled to fit the user’s device screen, but fixed-height Containers inside that Layout are not being scaled in the same way. That would explain why the Layout reports one value, the child Containers report values that add up correctly, but visually there is still a gap.

You can expose this scale difference by setting a test Layout to a known height, waiting briefly for it to render, then calculating:

LayoutScaleValue = Layout Height / Layout Computed Height

In my test, this gave me a scale value of around 0.85.

Once that value is known, I can apply it when setting the height of other Layouts. For example, instead of setting a Layout height directly to the sum of its child Container heights, I set it to:

Intended Layout Height × LayoutScaleValue

This seems to bring the visual Layout height back in line with the fixed-height Containers.

On the first screen:

On later screens, if you know the pixel height of your containers:

image

or if you don’t:

This is obviously only a workaround, but it seems to confirm that Android is applying a scaling factor to the Layout itself which is not being reflected in the fixed pixel heights of child Containers.

Worth noting that this bug does not appear to happen on iPhone. It seems to be Android-specific.

Grant