Streaming live at 10am (PST)

Native Dropdown Component

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:

Live page:

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.

Ok, but I don’t see a setting for veritical-align top. 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.