Vertical alignment of labels with jQuery UI Selectmenu

[philwareham]

The labels for selectmenu seem to be out of kilter vertically.

[phiw13]

FWIW

.ui-selectmenu-button{
....
/*vertical-align: top;*/
margin-bottom: calc(-0.30769230769231em * 1.538462 - 2px);
}

Explanation: -padding-bottom * page-line-height - border-top+border-bottom

The whole calc() computes to something like -8px

Hat tip some long time ago, CSSD mailing list. I’ve used that on a couple of sites without problem(s).

BTW - you may want to remove the padding on .ui-selectmenu-button span.ui-selectmenu-text.

[philwareham]

Hi Philippe,

Thanks - I'm still working through the rewrites for jQuery UI v1.12, not got to selectmenu widget as yet. It will be fixed in due course.

[phiw13]

Here is a better fix:

.ui-selectmenu-button {
...
  /*overflow: hidden;
  vertical-align: top;*/
}

You don’t need to set overflow:hidden, given how the widget works with jQuery-UI 1.12; it is already controlled on the inner span.

[philwareham]

Fixed. Closing.