CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aj.
Aj.

Reputation: 27

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

<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

Upvotes: 0

Views: 6021

Answers (4)

DaniP
DaniP

Reputation: 38252

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

Upvotes: 3

otinanai
otinanai

Reputation: 4025

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

select option{height:50px}

Demo here.

Upvotes: 0

timo
timo

Reputation: 2169

If you insist on using jquery for this you can use

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

Upvotes: 0

Sgoldy
Sgoldy

Reputation: 796

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.

Upvotes: 0

Related Questions