Tab Bar Not Fully Hidden When Using Bottom Margin — Any Real Fix?

[bugralal]

I am having issue with floating tab bar.

To make the native tab bar look floating, I added a bottom margin. However, when navigating to another page using stack navigation, Bubble does not fully hide the tab bar. It seems the bottom margin is not included in the hide calculation, so part of the tab bar remains visible at the bottom as a non-functional element.

I also cannot properly control the inner tab bar elements with conditions. Changing opacity or visibility does not work reliably because the native tab bar seems to operate independently from the page.

The behavior is also inconsistent between Android and iOS, which makes it difficult to create a stable floating tab bar design.

Has anyone found a real workaround for this?

I have read several related forum posts, but none of them seem to have a confirmed solution. Hopefully Bubble can fix this native behavior soon.

Similar issue to

Tab bar still visible in pages that have it disabled

Hi, I have a marketplace app and use the tab bar. I adjusted the design and made it a little more to my liking but now the tab bar is always visible and doesn’t completely disappear when the view has it disabled. As you can see in the screenshots below, the second image has the tab bar disabled but despite it moving downwards, about half is still visible. Any ideas as to how I can fix this? [image][image]

Thanks in advance.

[isamatiasilms]

I understand that you’ve already tried changing the visibility settings, and I’m assuming the element is set to collapse when hidden. Have you tried using de-bug mode to inspect the element? It might help identify whether it’s actually being hidden or if something else is preventing it from displaying.

Could you also post a few screenshots showing the issue you’re describing? That would make it easier to help identify the cause.