Fixed position tab bar not fixed when it's interactive component

Ask the community
1

I created a interactive component tab bar, with an hide element behind. I prototype with my component to make the hide element appear on click (classic interactive component).

When I put the tab bar on iphone frame, set with “fixed” on scroll behavior, if i just scroll on my prototype, the tab bar still fixed on the bottom screen.
But when I click on my tab bar and scroll after (or before), the tab bar is bugged, it goes up, then come back.

I tried to fix this bug with all contrainst setting, but still doesn’t work.

You can see my file here https://www.figma.com/file/qcA0G1by2BGe317GA5AfSa/Bug-report-(Copy)?node-id=0%3A1&t=YPAS6Py2ubspwIw5-1

I don’t know if it’s a bug or just a missreading…

I hope you can help me :pray:

1 Like
2

Wrap your instance in a frame, and set the desired constraints and fixed position for that frame.

1 Like
3

I have already done it :smiling_face_with_tear:

4

Finally found the solution, thanks to the Figma support and tank666 (not about what they suggest but they help me to found out).

Even if your component is set in a frame, when your put it on your phone frame, place it inside a frame (sized with your prototype device ; ex:375*812 - iPhone 13mini) and place this frame on the bottom of your artboard, set the vertical constraint to bottom and fixed position on scroll behavior.

Thanks everyone !

3 Likes
5

PS : Set your artboard with overflow vertical Scroll behavior

1 Like
6

Thanks a lot!

1 Like
7

Thank you! I spent HOURS on this. Your solution worked like a charm!

1 Like