javascript - How to create a 100% width select with SelectBoxIt.js - Stack Overflow

admin管理员组

文章数量:1252714

I have some trouble creating a 100% width select box with SelectBoxIt.js

Even when setting the CSS width to 100%, the select 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>

I have some trouble creating a 100% width select box with SelectBoxIt.js

Even when setting the CSS width to 100%, the select 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>

• javascript
• html
• css

Share Improve this question Follow edited Aug 16, 2013 at 12:06 groodt asked Aug 16, 2013 at 8:53 groodtgroodt 1,9931515 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

js

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

and then css

.selectboxit-container {
    width: 100%;
}

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

Greg Franko helped me solve the issue.

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

Basically, you need to disable autoWidth like so:

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

And then set the width to 100% in your CSS:

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

本文标签： javascriptHow to create a 100 width select with SelectBoxItjsStack Overflow