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.
Here is my site Read-Only: https://preview.webflow.com/preview/thresholdshows?preview=1859d7320679945ab8185bdbdbcd2135
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.
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!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.