Native Dropdown Component

[Port_of_Folio]

Not entirely sure if this is a bug or if I’m just missing something obvious. When I use a dropdown widget and style it with the same properties as a button, the dropdown always sits 20 pixels lower than the button. I can’t figure out where this extra 20 pixels is coming from and I always have to do a relative position shift of the widget to get it to line up with other elements. It will align if I set the parent element to flex, but I can’t always use that as a solution.

Anyone else notice this?

I’ve attached a screen grab showing an example and here is my shared project link:
https://preview.webflow.com/preview/dropdown-widget-sits-low?utm_medium=preview_link&utm_source=designer&utm_content=dropdown-widget-sits-low&preview=e23466ccb7af65047d1e2be9413e465d&mode=preview

Live page: https://dropdown-widget-sits-low.webflow.io

[philipboomy (Philip)]

This class w-dropdown-toggle has a vertical-align: top. If you remove that it will align correctly. Alternatively you can use flex box in the parent div container the two. That will fix it too.

[Port_of_Folio]

Ok, but I don’t see a setting for veritical-align top. Where is it? Why is that set natively?

[webdev (Jeff Selser)]

@Port_of_Folio

Where is it? Why is that set natively?

In the core CSS and the base styling is there to make it work in most use cases.