Jquery mobile text box and select menu with same height

Question

I have a text menu and a dropdown menu in ay jquery mobile app. but the problem is that the text menu's height is less than select menu's height.

That makes the UI looks bad.

Code:

<div data-role="header" data-position="fixed">
    <h1>heading</h1>
</div>
<div data-role="content">
    <div class="ui-grid-a" style="margin-bottom:10px;">
        <div class="ui-block-a" style="width:35%;">
            <input type="date"/>
        </div>
        <div class="ui-block-b" style="width:65%;">
            <select name="select-native-1" id="doctorClinics" data-theme="c" style="padding:0;margin-bottom:0">
                <option value='1' selected='selected'>Option 1</option>
                <option value='1' selected='selected'>Option 2</option>
            </select>
        </div>
    </div>

Screenshot:

Click here for JS Fiddle

How can I achieve it?

Thank you.

Answer 1

Try adding

  data-mini="true"

to the select box. It will display the minified version of the select box. Also you cannot have exact height match for both the input types you would need to modify the css as well.

Try this jsfiddle. http://jsfiddle.net/Bp2eX/2/

I also was trying to use the custom jquery mobile plugin. just use in place of the date field. Do try it.