How to add a hovering button or bottom tab menu?

Is there a way to make a button hover over a list?
I’d like to make add a tab menu fixed at the bottom of the screen.

If you set a Container to be Position: absolute under Style > Advanced properties, then set its Bottom: 0 under Style > Layout and position > Position (you need to change the dropdown from Top to Bottom), the container will float at the bottom of the screen.

Alternatively, you can set the Page layout under Style to Stretch to the viewport height and Disable scroll, then add a container for your tabs and a Scroll View for the scrollable content.

Thank you. I tried it and button is now placed at the buttom.

1 Like

Hi @Harri_Sarsa,

The solution seems to work on the editor and app, but the bottom container overlaps with above objects on web preview.

Alright, I’ll ping our client team to see what might be going on! Are the issues specifically with the Stretch to the viewport height + Scroll View approach or position: absolute?

I checked on several combinations.

  1. height(checked) + disable scroll(checked) puts the bottom component to overlap with the upper ones
  2. height(checked) + disable scroll(unchecked) leaves the component at the bottom, but the component has to be set at position: absolute.

Definitely seems like a bug – did you find a working combination yet, or is the issue preventing you from building the right kind of UI? In any case, we’ll look into it!

I don’t know if this is still a bug but I would like to have a component “float” and be in a fixed position above other components. I’m trying to implement a search bar with a list underneath but do not want to disable scroll for the view. This would help in dealing with different screen sizes.

@Harri_Sarsa It’s working for me:
1- Create a Container for the buttons.
2- Under Style > Dimension and position > Position
- Change the dropdown from Top to Bottom
- set its Bottom: 0
Under Style > Advanced Properties, keep Position: relative

But the bottoms container is not float on the bottom.

i tried this and it won’t work

Hi! Looks like you haven’t gone through all the steps, you have to set the page layout to stretch to viewport etc., please see more e.g. in this tutorial.