CODEWITHSUNDEEP
jquery-uidrop-down-menu
nacho4d
nacho4d

Reputation: 45108

align jqueryui's button and selectmenu

I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)

As the shown code I have no configuration other than the select width:

HTML:

<div>
    <button>button</button>
    <select>
        <option>nacho</option>
        <option>tama</option>
    </select>
</div>

jqueryui JS

$('button').button();
$('select').selectmenu({
    width: 120 // Needed to show see options
});

Current Result:

enter image description here

Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/

Is this a bug or a setting I am missing? Any help is appreciated

EDIT: Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?

Upvotes: 1

Views: 918

Answers (4)

nacho4d
nacho4d

Reputation: 45108

Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.

I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.

.ui-selectmenu-button {
    vertical-align: middle;
}                                                                                                                                                                  
.ui-selectmenu-button .ui-selectmenu-text {
    padding-top: 0.3em; padding-bottom: 0.3em;
}

enter image description here

Upvotes: 1

Yevgeniy Afanasyev
Yevgeniy Afanasyev

Reputation: 41360

Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/

$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
    border: thin dotted red;
    
}
span {
    border: thin dotted blue;
}
.w{
    display:inline-block;
    vertical-align: middle;
}
<div>
    <div class='w'>
    <button>button</button>
    </div>
    <div class='w'>
    <select>
        <option>nacho</option>
        <option>tama</option>
    </select>
    </div>
</div>

Upvotes: 0

Yevgeniy Afanasyev
Yevgeniy Afanasyev

Reputation: 41360

You can use 

vertical-align: top;

for your button like here: https://jsfiddle.net/9xv7jqn4/4/

$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
    border: thin dotted red;
    
}
span {
    border: thin dotted blue;
}
.one{
    vertical-align: top;
}
<div>
    <button class='one'>button</button>
    <select>
        <option>nacho</option>
        <option>tama</option>
    </select>
</div>

Upvotes: 0

Adrian
Adrian

Reputation: 70

Maybe with this css:

display: inline-flex;
vertical-align: middle;

Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/

Upvotes: 1

Related Questions