Question

I am using jQuery Mobile and am having an issue with the margin added to the top of a drop down list element.

I am trying to align a drop down list next to a text input, but the top of the inputs appear out of line.

Here is a sample: http://jsfiddle.net/f6Prp/

What I want is the drop down list to be flush to the top, along with the text box. No matter what style I add, I can not seem to affect the position of the drop down.

Any help would be much appreciated.

Thanks,

Chris.

Answer 1

The ui-btn class defines a top margin. You can disable it with the following style:

.ui-select .ui-btn {
    margin-top: 0px;
}

Note that the above will affect all select boxes, which might not be what you want. In that case, you can use a more restrictive selector.

You can find the updated fiddle here.