Streaming live at 10am (PST)

Drop down works fine in webflow but not on device

Hi

I built a filter menu and interaction for the mobile experience. when you click the plus button the filter options drop down.

The filter state and button are wrapped in a div
positioned relative

The filter options are all wrapped in a separate div
also positioned relative

Both those elements are wrapped in a parent div that is fixed position to the top.

This interaction and elements work the way they are supposed to in Webflow but when I test out on a device the top portion of the filter parent element is sitting behind the filter state wrap.

What do I need to do to get this working correctly?


https://preview.webflow.com/preview/tqe-2-0?utm_medium=preview_link&utm_source=designer&utm_content=tqe-2-0&preview=e529d2eb4a70c58af828306c22adf956&pageId=61674b38ef6719e7cc394d30&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Your animations are causing the problem. Your filter-parent at 0:00 is not set to move far enough down when the menu opens. I set the Transform Y to 39px. See below.

Also, make sure filter-parent and ‘filter-state-txt’ at initial state are manually set to 0. It will be changed to blue once set. If you don’t, you’ll get an error for not setting any values.

Hope this helps!

Hi @joejola Thanks for the assistance. I’m using percentages for my value in the drop-down menu. I tried playing around in pixes like you did and I got this

Yeah, it doesn’t matter which unit you use. I only used pixels because it’s more precise.

@joejola Ok great. Still not sure why it looks messed up in Webflow but not in the browser? Why does the filter-parent not sit right under show-hide-filter?

@joejola Also the fix you suggested now makes the filter-parent “jump” before it goes back in. Not very smooth.

@joejola This is what the element looks like if I do not apply a transform

This is exactly how I want it to look when it opens up. Except the filter state text would say “close filters”

Why tho in the browser is it not behaving the same way as it does in Webflow?