Jquery Uniform change select size

Question

How can I change the size of an input select using Jquery Uniform?

http://uniformjs.com

Broadway

-1 for total lack of effort. SO is not a code generator. What have you tried so far? – Instil

Answer 1

<script>
 $('div.selector span', $('#parent_span')).css('width', '600px');
 $('div.selector', $('#parent_span')).css('width', '630px');
</script>

<span id="parent_span">
 <select style="width:630px;">
 </select>
</span>

Worrywart

Answer 2

Change width for div.selector span using CSS, but you 'll have to consider width of parent tag too.

Glory

Answer 3

This is what worked for me:

set selectAutoWidth : true when creating.

eg:

$("select, input, textarea, input:checkbox, input:radio, input:file").uniform({selectAutoWidth : true});

then give a width to the select. eg: <select id="xx" style="width:70px;">

Eyeleteer

Answer 4

It is bad practice to use inline styling. Here is the proper way to do it according to the Uniform docs:

If you want to specify a size of a select element and then have Uniform wrap it appropriately, there will be some difficulty. The size of the element needs to get detected and then will be changed by Uniform. For this to happen, it is suggested you do one of these solutions when you have issues.

• Set a custom inline width for the element () (bad practice)

  OR

• Use two css rules; select { width: XXpx } and .selector select { width: 100% }

So using the second option, in your css file do:

#parent_span select {width:630px;)
#parent_span .selector select {width:100%;}

The trick is the 630px is used to build the wrapping Uniform div and then the second css rule kicks in which makes the select tag take 100% inside it.

Pluto