Clever Geek Handbook

How to align jQuery UI selectmenu with buttons?

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

I am trying to implement jQuery UI that has selectmenu next to some regular... For some reason I can't figure out the selectmenu is not aligned correctly; on the page higher than on the buttons.

This is how it looks:

Screenshot of mis-aligned UI elements

I'm not sure if this is a bug or not, it seems very wrong to me. I struggled for a long time but could not understand.

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

+3


source to share


4 answers


You can simply apply vertical-align:middle

to a dropdown of spacing to align the buttons with the dropdown correctly.

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

Bin

It looks like there is no way to provide a custom class name for the selected menu widget (which is bad if it does), since applying the rule to the class would be much better. You also can: -

Apply class name for select



and in css provide general rule for any .menu-button

s

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

Bin2

+9


source


It would actually be easier to make the actual buttons (not menus) upward using

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



It can be inline and no custom class creation is required.

+2


source


The solution I applied was to place the content that I would like to vertically align in the post display: flex

. For example:

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

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

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

+2


source


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

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

CSS

.fixAnnoyingSelectAlignmentClass
{
   vertical-align: middle;
}
0


source






More articles:


All Articles