簡體   English   中英

選擇下拉寬度與輸入無關

[英]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>

目前看:

在此輸入圖像描述

期望的樣子: 在此輸入圖像描述

我們的想法是,如果下拉列表擴展到更少,則文本更具可讀性。

示例jsFiddle

每個標簽的寬度都是通過JS動態設置的。 要覆蓋那樣做的事情:

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

小提琴

當下拉列表應該動態地將其寬度更改為最大選項:

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

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

羅賓的答案對我不起作用。 但是以下做了。

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

這將使您能夠做出響應。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM