Javascript 选择与输入无关的下拉宽度

Javascript 选择与输入无关的下拉宽度,javascript,jquery,selectize.js,Javascript,Jquery,Selectize.js,我正在尝试使用Selectize来呈现很长标签的下拉列表。文本可以很宽,但输入对宽度有限制。Selectize完美地包装了文本(在输入和下拉列表中),但理想情况下,下拉列表能够比输入扩展得更广,以实现更好的可读性。是否可以让Selectize具有独立于输入的下拉宽度 <select style="width:300px" multiple> <option value="">Enter some tags...</option> <option valu

我正在尝试使用Selectize来呈现很长标签的下拉列表。文本可以很宽,但输入对宽度有限制。Selectize完美地包装了文本(在输入和下拉列表中),但理想情况下,下拉列表能够比输入扩展得更广,以实现更好的可读性。是否可以让Selectize具有独立于输入的下拉宽度

<select style="width:300px" multiple>
<option value="">Enter some tags...</option>
<option value="1" selected>QID7_4 : Where do you store your digital photos? Check all that apply.-On a cloud service like iCloud, Dropbox, Google Drive, or Amazon Cloud</option>
<option value="2">QID5_2 : What do you take pictures of most often? Please rank the following / by drag and drop.-Friends and social activities</option>
<option value="3">QID13_5 : How important is it to you that your photos are organized in the / following ways?-By quality (including favorites)</option>

输入一些标签。。。
QID7_4:您的数码照片存储在哪里?勾选所有适用项。-在云服务上,如iCloud、Dropbox、Google Drive或Amazon云
QID5_2:你最常拍什么?请通过拖放对以下内容进行排名。-朋友和社交活动
QID13_5:你的照片按以下方式组织对你有多重要?-按质量(包括收藏夹)
当前外观:

所需外观:

这样做的目的是,如果下拉列表扩展为较少的换行,则文本的可读性会更好


通过JS动态设置每个标签的宽度。 要覆盖它,请执行以下操作:

.selectize-dropdown {
    width: 600px !important;
}

罗宾的回答对我不起作用。然而,以下情况确实发生了

.selectize-input {
    min-width: 600px !important;
}

当下拉列表应将其宽度动态更改为最大选项时:

.selectize-dropdown {
  width: auto !important;
}

.selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
   white-space: nowrap;
}

这将使您能够做出响应。

我不是100%理解您的问题吗?你能解释一下吗。更新图片,解释当前与期望的功能太容易了!谢谢你的快速修复。@RapidInja太棒了!很高兴有帮助。谢谢!以防万一,
min-width
怎么样?@AlexanderSuraphel是的,
min-width
应该也能用。@RobInbolocataCutan我刚试过这个,设置
width
似乎没有效果。。。我遗漏了什么吗?但这与输入无关你是对的@Oleg。OP的目的是使下拉菜单“如果下拉菜单扩展为较少的换行,则文本更具可读性。”根据我的理解,并不是使其严格具有特定的宽度。
.selectize-control {
  width: 90% !important;
}