Jquery Uniform change select size

Question

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

http://uniformjs.com

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>

Answer 2

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;">

Answer 3

使用CSS更改div.selector span宽度，但您也必须考虑父标记的宽度。

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.