How to align jQuery UI selectmenu with buttons?

Question

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.

PSL · Accepted Answer · 2014-08-17 15:44:19Z

9

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

edited Aug 17, 2014 at 15:44

answered Aug 17, 2014 at 15:26

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PSL Over a year ago

Not sure if you can add a custom class to the widget while initialization, if so setting the rule to a classname and using it here would be more appropriate.

unwind Over a year ago

Hm ... That looks better in your bin, but it didn't work in my actual code. What is speed-button? That name doesn't appear in your HTML, does it?

PSL Over a year ago

@unwind It seems like it adds -button to the id, I am not sure if you can provide a classname to the widget though... Seems like there is no option to it. SO whatever id you are using you may want to add -button to the rule.

unwind Over a year ago

Thanks, that actually works. I'm glad I finally asked, I would never have figured that out myself.

PSL Over a year ago

@unwind You are welcome. I have provided another option which probably is better than dealing with ids.

Alejandro Benito-Santos · Accepted Answer · 2014-10-06 09:07:53Z

2

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.

answered Oct 6, 2014 at 9:07

Alejandro Benito-Santos

2,06913 silver badges25 bronze badges

Comments

Kolban · Accepted Answer · 2014-12-09 01:24:24Z

2

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/

answered Dec 9, 2014 at 1:24

Kolban

15.4k3 gold badges45 silver badges71 bronze badges

Comments

vik · Accepted Answer · 2016-08-16 19:43:17Z

0

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

answered Aug 16, 2016 at 19:43

vik

3533 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to align jQuery UI selectmenu with buttons?

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related