Search code examples
javascriptjqueryjquery-uipositioningjquery-ui-selectmenu

jQuery ui selectmenu vertical position offset (relatively to buttons in this line)

In my form I place control elements in a line: button, select box, checkbox. It looks logically right. But since I've started using jQuery UI I see strange vertical of select box. Here's the example from jquery-ui site, a little bit shortened: https://jsfiddle.net/Tertium/z829pay7

  $(function() {
    $( "#speed" ).selectmenu( { width: 200});
    $( "#files" ).selectmenu({ width: 200});
    $( "#but1" ).button();
    $( "#but2" ).button();

    });

Tested on jquery 1.11.2 and 1.10.2, jquery-ui: 1.11.3, all settings/css by default. How I can show them in line or at least valigned by middle? Tried panning, margin, div, table - no effect at all.

And screenshot just in case:

before and after

Solution

  • You can use vertical-align : middle;on your select-menu and button to align them vertically :

    JSFIDDLE