Screen not filled 100%

I've hidden all horizontal and vertical arrangements which might take up unwanted space and only have one arrangement below my top bars which should fill the entire lower part of my screen. Yet, it takes up only a part of the remaining area. Is this a bug? I have tried by setting the height to 100%, automatic and "fill parent", but the result is always the same.
I also tried by deleting all H/V arrangements i.s.o. making them invisible, but that doesn't help either.
The horizontal bars below the "subtitle" bar are the hidden H/V arrangements. Unfortunately, MAI doesn't really hide them in the preview, hence I set the height to 1 or 2 pixels to get them out of my way (but I un-checked the "visible" property to hide them on the phone).

Phone: Xiaomi MI8 Lite (screen: 1080 x 2280 pixels) runs on Android 10 QKQ1.

PS: I also tried by deleting all objects except the one I wanted to see and all blocks. Still the same.

Switch off the Scrollable property in Screen.

It was switched off, but that doesn't make a difference. But the vertical arrangement is scrollable. Has to be because the user needs to be able to scroll when the phone is rotated and part of the vertical arrangement contents is hidden.
But your suggestion probably reveals the real issue: when I do the same using a vertical arrangement, my screen is used for 100%, when I use a scrollable VA, the issue occurs.
I don't want to use a scrollable screen, because then the top bars of the screen go out of view. I wanted to scroll hte contents of the vertical arrangement.
Looks like a bug to me...

Use the Scrollable Vertical Arrangement

That's what I'm doing and that's what I'm having the problem with. If I use a non-scrollable vertical arrangement the problem goes away (in exchange for hidden part of the screen when I rotate the phone).

Can you give the aia I will change it and send it back to you

Shure. I will send you the stripped-down version (the full version needs an Arduino ESP32 with Bluetooth to connect to) which exhibithe the problem. There are no blocks to handle events. Just the screen is enoug hto see what is going on.

1 Like

I just need the project designer screen

Under that red bar, try adding a vertical layout with a parent fill height.
Or above the red bar if you want it at the very bottom.


I tested it. Did not work. The fill parent size does not seem to work with a scrolling layout. Place the vertical scroll arrangament in vertical arrangament with the same background color.

Working with a vertical scrolling arrangement is not very intuitive. The height of the arrangement is automatic despite selecting the fill parent. By placing another arrangement with the fill parent height in a scrolling arrangement, you won't stretch it either, it will only work with the percentage height or in pixels.

Put a label set to fill parent below the vertical scrolling arrangement and above the red bar. Make sure the red bar and the label are outside any scrolling arrangements.

Can you please post the aia file

What I did:

  • recreate the screen using a non-scrollable vertical arrangement. Set the back-color to cyan.
  • I have 2 empty labels with a height of 20% which I use to create space between the colored bar and the table. A 3rd label is also used as spacer, but has a height of "fill parent" to force the canvas to go all the way to the bottom of the screen.
  • all of that works as expected.
  • the downside is that the bottom half of my screen becomes invisible and inaccessible when I rotate the phone.

Next step:

  • add a scrollable vertical arrangement to the screen.
  • move all components from the non-scrollable VA to the scrollable VA, ensuring that all settings remain the same.
  • remove the non-scrollable VA from the screen.
  • change the back-color to pink to keep both set-ups apart.

Now you see that the phone's display is only partly filled. When I rotate the phone, I see only the upper half of my VA, but I can scroll and access the lower part.

noscrollVertical_OK_copy.aia (96.7 KB)
scrollVertical_NOK.aia (96.7 KB)

@Patryk_F: it kinda works when using % for the height of the components inside the scrollable VA, but it becomes tricky, since I have to take into account the height of the components outside the scrollable VA. In addition, using % messes up the display of the table arrangement (height now expressed in %) when I rotate the phone. At the end of the day that's not a good solution.
Thanks for trying.

@TimAI2: the lowest label (between the table and the red canvas) is set to "fill parent", with the expectation that this one would stretch the entire scrollable VA all the way down, putting the red canvas at the bottom. But it doesn't.

Also tried to put the scrollable VA inside a non-scrollable VA, but the outcome is the same: :cry: :cry: :cry:

See this:

fillscreen.aia (1.1 KB)

This is probably not what the author of this topic is about. Try to make a vertical scrolling arrangement that stretches across the screen. So the minimum size is fill parent, and if necessary, the height is stretched and then the arrangament is scrolled. Even if you set the height of the arrangement to 300px, in the phone will not have that much. It looks as if the hight is always automatic.

Just like with the Screen set to scrolling, a scrolling arrangement will not actually scroll until its content is bigger/wider/higher than its own size. This affects its ( a scrolling arrangement ) appearance on screen. It is not ideal, but is by design. You have to work with the scrolling arrangement and arrangements around it to get the appearance and behaviour you are after, or fill it/overfill it with content.

Therefore, the height setting in a scrolling arrangement is not fully worked. Fill parent doesn't work at all. In your example, it looks like something is working, but not quite. Why is the background of the orange strip not stretched? Maybe it could be improved somehow.

It is a VSA set to fill parent. It shows like that because it has no content, but you can see that the vsa is "filling parent"