CSS 使用 Jquery Ui - 在特定的多选框上设置宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5773073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using Jquery Ui - setting width on a particular multiselect box
提问by mtay
I am using Jquery UI like this:
我正在使用这样的 Jquery UI：
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
});
$('.ui-multiselect').css('width', '100px');
What I'd like to do is set the .ui-multiselect for only the #companyType div. Something like this:
我想要做的是只为#companyType div 设置 .ui-multiselect。像这样的东西：
$('#companyType.ui-multiselect').css('width', '100px');
Is there a way to do this? Thank you!
有没有办法做到这一点？谢谢！
采纳答案by keepitterron
If you want to set that particular css rule for only elements with class .ui-multiselect contained in the div #companyType I think jquery ui has no influence in it. Try this:
如果您只想为包含在 div #companyType 中的类 .ui-multiselect 的元素设置该特定的 css 规则，我认为 jquery ui 对它没有影响。尝试这个：
$('#companyType .ui-multiselect').css('width', '100px');
This will set width = 100px to all elements contained in #companyType that have a class 'ui-multiselect'
这会将 width = 100px 设置为 #companyType 中包含的所有具有“ui-multiselect”类的元素
回答by Youssef
Try this code with minWidth option. It is the minimum width of the entire widget in pixels. Setting to “auto” will disable, and the default is: 225
用 minWidth 选项试试这个代码。它是整个小部件的最小宽度（以像素为单位）。设置为“auto”将禁用，默认为：225
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
minWidth:100
});
回答by pit
not sure what version you use, but v1.5 includes a new "classes" parameter that you can set for styling your multiselect element.
不确定您使用的是哪个版本，但 v1.5 包含一个新的“类”参数，您可以设置该参数来设置多选元素的样式。
Have a look here on how to use it : http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/it says
看看这里如何使用它：http: //www.erichynds.com/jquery/jquery-ui-multiselect-widget/它说
Additional class(es) to apply to BOTH the button and menu for further customization. Separate multiple classes with a space. You'll need to scope your CSS to differentiate between the button/menu:
适用于按钮和菜单的附加类以进一步定制。用空格分隔多个类。您需要确定 CSS 的范围以区分按钮/菜单：
Example
例子
$("#companyType").multiselect({
classes : "myClass"
});
then in the css file use:
然后在 css 文件中使用：
/* button */
.ui-multiselect.myClass {}
/* menu */
.ui-multiselect-menu.myClass {}
回答by Geo V L
Another simple method for adding width to the multiselect list box is like these It is easy than adding another class or inline styling
另一种为多选列表框添加宽度的简单方法是这样的 比添加另一个类或内联样式要容易
$('#companyType .ui-multiselect').width(200);
This will set a with of 200 px to the specified list box
这将设置一个 200 px 到指定的列表框
回答by Barry Guvenkaya
For the reference, if you want to a percentage for the width (e.g 100%) apply it within resize event of the window.
作为参考，如果您想在窗口的调整大小事件中应用宽度的百分比（例如 100%）。
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', '100%');
});
You can also assign it to another element's width dynamically:
您还可以将其动态分配给另一个元素的宽度：
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width'));
});
