How to create a 100% width selection using SelectBoxIt.js

Question

I have some problems creating a 100% width select box using SelectBoxIt.js

Even if you set the CSS width to 100%, the selection box will not fill 100% of the container element.

CSS

.test1, .test2, .test2 .selectboxit, .test2 .selectboxit-options { width: 100%; } 

HTML:

 <select name="test2" class="test2"> <option value="SelectBoxIt is:">SelectBoxIt is:</option> <option value="a jQuery Plugin">a jQuery Plugin</option> <option value="a Select Box Replacement">a Select Box Replacement</option> <option value="a Stateful UI Widget">a Stateful UI Widget</option> </select> 

Answer 1

Greg Franco helped me solve this problem.

You can see the solution in JSBin. http://jsbin.com/udapic/1/edit

Basically, you need to disable autoWidth like this:

$(".test2").selectBoxIt({ autoWidth: false, copyClasses: "container" });

And then set the width to 100% in CSS:

.test1, .test2, .test2 .selectboxit, .test2 .selectboxit-options { width: 100%; }

Answer 2

Js

 $(".mySelect").selectBoxIt({ autoWidth: false }); 

and then css

 .selectboxit-container { width: 100%; } .selectboxit-container .selectboxit { width: 100%; }