CODEWITHSUNDEEP
javascripthtmlcssjquery-ui
unwind
unwind

Reputation: 399753

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.

Upvotes: 4

Views: 3334

Answers (4)

vik
vik

Reputation: 333

To expand on the marked answer, there is a way to obtain the jquery object the selectmenu creates. Make sure you initialize the selectmenu first or it won't work.

$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");

CSS:

.fixAnnoyingSelectAlignmentClass
{
   vertical-align: middle;
}

Upvotes: 0

Kolban
Kolban

Reputation: 15246

The solution I applied was to place the content I wished to be vertically aligned in a display: flex entry. For example:

<div style="display: flex; align-items: center;">
    ... other elements here
</div>

for more details on this display type, see this excellent discussion:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Alejandro Benito-Santos
Alejandro Benito-Santos

Reputation: 2069

It might actually be easier to make the actual buttons (not menu) up by using

<button style="vertical-align: top"></button>

It can be inlined and creation of a custom class isn't required.

Upvotes: 2

PSL
PSL

Reputation: 123739

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.

#speed-button{
  vertical-align : middle;
}

Bin

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;
}

Bin2

Upvotes: 9

Related Questions