Drop down animation not completely disappearing as it should

Hey friends,

I’m running into a strange issue with one of my hover animations. I have a search field that drops down a suggestion bar when clicked.

When you hover off of the suggestion bar it’s supposed to completely disappear but, as you can see from this image below, the top portion of the suggestion bar is still showing.

Inside the animation settings, I have the height set at 0 pixels so it should completely disappear. Overflow is also set to hidden.

Any suggestions would be greatly appreciated.

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/thresholdshows?preview=1859d7320679945ab8185bdbdbcd2135

Hi @ptrnelson,

I took a look at your site but couldn’t reproduce this issue and the interaction seems to be working as expected.

Here is a GIF with what I’m seeing on my end - Are you still experiencing this issue?

Hey Nita, thanks for getting back to me. The interaction is working but if you look at the bottom of the search box in it’s normal state you’ll notice that the bottom line is about 2px thicker than it should be. That extra thickness is coming from the top of the suggestion menu. When I delete the menu the search field looks normal.

It’s so strange. It was looking/functioning perfectly and then…it wasn’t. :\

I tried messing with for an hour yesterday but couldn’t figure it out.

Any suggestions?

Hi @ptrnelson,

If the problem you are having is the grey line at the bottom of your search bar it is because by default borders are not included in the size of the content but it affect the flow of the document. (there is a property in css to change this but it’s not available within the Webflow interface without custom code). So when you animate the size to 0 it won’t include the border

What you can do though is use the shadow property to set an inside shadow (which doesn’t affect the document flow)

Thanks for the insight Max, worked like a charm!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.