unwind unwind - 6 months ago 32
Javascript Question

How to align jQuery UI selectmenu with buttons?

I've been struggling with this for a while (I'm really not experienced with jQuery UI).

I'm trying to implement a jQuery UI that has a selectmenu next to some regular buttons. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.

Here's what it looks like:

Screenshot of mis-aligned UI elements

I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.

The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: http://jsbin.com/afixij/10/edit?html,css,js,output. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.


You could just apply vertical-align:middle to the dropdown which is made up of spans to get the buttons aligned properly with the dropdown.

  vertical-align : middle;


It appears there is no option to provide a custom classname for select menu widget (It is bad if that is the case) as applying rule to a class would be much better. You could as well do:-

Apply a classname for the select

and in css provide a generic rule for any .menu-buttons

.menu-button + .ui-selectmenu-button{
   vertical-align : middle;