Alignment issue with Tab Bar

[BarryB]

Hi All, I’m having an issue with my components changing alignment if I have a tab bar on a page with a list and text or a list under it.

As you can see in the images. When I add a tab bar to my screen it increases the spacing under my list.

In the below screen shots the only difference is I’ve added the tab bar I haven’t changed anything else.

Can any tell me what I’m doing wrong here? Or let me know a work around?

Thanks

Barry

[Victor]

Hi @BarryB,

The layout of the page is calculated dynamically, based on the page elements, their dimensions, sizes and distance between them. Sometimes it is difficult to predict where the exact element will be placed. I observe the same effects on my test app.

What I suppose is that the location for “Testing” label on the left screen was calculated based on the distance from the top, while on the right screen it was calculated based on vertical proportions between the top bar and bottom bar. But this is just a guess - I might be completely wrong here.

In your case probably the best way would be simply to change the location of “Testing” label.

Best regards, Victor.

[BarryB]

Thanks Victor, that explanation really helped. I added a rectangle behind the top list that extends below the text, and that seems to mean it calculates the text’s position from the top now.

Thanks

Barry