选择下拉宽度与输入无关

Question

我正在尝试使用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>

目前看:

期望的样子:

我们的想法是,如果下拉列表扩展到更少,则文本更具可读性.

示例jsFiddle

Answer 1

每个标签的宽度都是通过JS动态设置的.要覆盖那样做的事情:

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

小提琴

Answer 2

当下拉菜单应将其宽度动态更改为最大选项时：

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

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