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.

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