[英]How to create a 100% width select with SelectBoxIt.js
I have some trouble creating a 100% width select box with SelectBoxIt.js 使用SelectBoxIt.js创建100%宽度选择框时遇到一些麻烦
Even when setting the CSS width to 100%, the select box will not fill 100% of the container element. 即使将CSS宽度设置为100%,选择框也不会填充100%的容器元素。
CSS: CSS:
.test1, .test2, .test2 .selectboxit, .test2 .selectboxit-options {
width: 100%;
}
HTML: 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>
js JS
$(".mySelect").selectBoxIt({ autoWidth: false });
and then css 然后css
.selectboxit-container {
width: 100%;
}
.selectboxit-container .selectboxit {
width: 100%;
}
Greg Franko helped me solve the issue. Greg Franko帮助我解决了这个问题。
You can see the solution in JSBin. 您可以在JSBin中看到解决方案。 http://jsbin.com/udapic/1/edit
http://jsbin.com/udapic/1/edit
Basically, you need to disable autoWidth like so: 基本上,你需要像这样禁用autoWidth:
$(".test2").selectBoxIt({ autoWidth: false, copyClasses: "container" });
And then set the width to 100% in your CSS: 然后在CSS中将宽度设置为100%:
.test1, .test2, .test2 .selectboxit, .test2 .selectboxit-options { width: 100%; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.