选择独立于输入的下拉宽度
Selectize dropdown width independent of input
我正在尝试使用 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>
当前外观:
期望的外观:
我们的想法是,如果下拉列表扩展到更少的换行,文本将更具可读性。
每个标签的宽度是通过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;
}
.selectize-control {
width: 90% !important;
}
这将使您能够响应。
我正在尝试使用 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>
当前外观:
期望的外观:
我们的想法是,如果下拉列表扩展到更少的换行,文本将更具可读性。
每个标签的宽度是通过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;
}
.selectize-control {
width: 90% !important;
}
这将使您能够响应。