Jquery Mobile — how to Override Height and width of select box.

Question

<select id="selectId" name="name1" style="height:10% !important;" >
    <option>Select One</option>
    <option>xxx</option>
    <option>yyy</option>
    <option selected="selected">rrr</option>
    <option>ggg</option>
    <option>fff</option>
    <option>qqq</option>
</select>

How can i set the width and height for select. I am using jquery mobile css and i am unable to make this work. please help me

Thanks in advance

Answer 1

You need to change this css class .ui-select try this:

.ui-select{
  width:200px;
  height:70px;
}

Check the Demo

If you want to affect only that select use the id to target that like this in Jquery:

$(document).ready(function(){
  $('#selectId').closest('.ui-select').addClass('select_small')
})

With this you can add this class:

.select_small{
  width:200px;
  height:70px;
}

Check another DEMO

Answer 2

Try specifying exact height such as 100px, or if you want it to be with percentage, make sure your container has height as well.

<select id="selectId" name="name1" style="height:100px !important;" >

http://jsfiddle.net/F2952/

this runs.

Answer 3

If you insist on using jquery for this you can use

$("#selectId").width("enter your width");
$("#selectId").height(enter your height);

Answer 4

The height of select seems to be dependent on the options . So, I would style it like:

select option{height:50px}

Demo here .