I’m on the mobile editor and I want to remove the bottom padding that comes by default on the Tab Bar. Is there a way to do this natively in bubble or with a plug in?
Open to all approaches.
The idea is that I want to have a rounded tab bar that is not anchored to the bottom, like in the second image.
I used a floating group with navigation workflows but the transition between views is not very smooth. The screen seems to blink every time I use the floating group navigation but in the native tab bar it is much smoother.
At the moment, it’s not possible to remove or override the default bottom padding of the native Tab Bar in Bubble’s mobile editor. It’s tied to the device’s safe area, and there isn’t a native setting or plugin that allows full control over it yet.
Regarding the blinking issue with your floating group setup, could you share how the workflows are configured for each tab item?
Specifically:
Are you navigating between pages or just showing/hiding groups?
What actions are triggered on click?
That’ll help pinpoint what’s causing the flicker and suggest a smoother approach
I think OP is using a reusable floating group that imitates a tab bar and instead of using go to tab on button click, they are using go to view (as no view is checked as tab item). Hence the native smoothness in transition not working
I think I found a solution. There is still a small hiccup, though.
Add the items to the tab bar but make it’s opacity 0% so we can’t see it.
Set the bottom margin of the floating group to a negative value that compensates the size of the tab bar, so it sits on top of it.
Use “Go to tab” instead of “Go to view” as the workflow action.
With this, the transition between views is smooth. The only issue is that the Floating Group is still blinking when you switch to another view, but only the first time you access that view. After the first “visit” it stops blinking.
The blinking on the floating group navigation is usually caused by the page re-rendering on each navigation action. A common fix is to use a single-page app (SPA) structure — instead of navigating to new pages, you show/hide groups on the same page. That way the floating group stays mounted and never blinks.
For the rounded floating tab bar look specifically, you’d style the floating group with a dark background, rounded corners, and set it to float relative to the bottom with some margin so it’s not edge-to-edge.
The native Tab Bar does handle transitions more smoothly but gives you less style control (as you’re seeing with the padding). I’m not aware of a native way to remove that bottom padding or round the Tab Bar element itself.
One thing worth trying: are your floating group navigation workflows going to separate pages or toggling group visibility on the same page?
I don’t think it’d be a great idea to implement SPA on mobile. Native views and transitions give a good native feel to the app so it’d be good to use them
