Kendo ui Multselect - 凌駕風格

所以我有一個顯示Kendo MultiSelectFor標籤的網頁。一切正常。Kendo ui Multselect - 凌駕風格

不幸的是用戶的數據很長，所以下拉選擇項目被打包。用戶不喜歡這個。

有沒有辦法來覆蓋下拉列表的大小，以便比選定的項目列表框（它位於上面）更寬？

下面的HTML片段是我 - （但不漂亮運行）

到目前爲止，我一直在嘗試使用這樣的重寫某些款式：

#accommodationsMultiselect .k-有效{left}：-100px; width：600px }

到目前爲止，我還沒有能夠影響任何變化。在此先感謝

<html> 
 
    <head> 
 
    <meta name="generator" 
 
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <div class="form-group"> 
 
     <label for="AccommodationIDs">Accommodations</label> 
 
     <div> 
 
     <div class="k-widget k-multiselect k-header" deselectable="on" title="" style=""> 
 
      <div class="k-multiselect-wrap k-floatwrap" deselectable="on"> 
 
      <ul role="listbox" deselectable="on" class="k-reset" id="accommodationsMultiselect_taglist"> 
 
       <li class="k-button" deselectable="on"> 
 
       <div> 
 
        <span deselectable="on"> 
 
        <span class="k-state-default">Calculator - provided by family</span> 
 
        </span> 
 
       </div> 
 
       </li> 
 
       <li class="k-button" deselectable="on"> 
 
       <div> 
 
        <span deselectable="on"> 
 
        <span class="k-state-default">Computer for Essay</span> 
 
        </span> 
 
       </div> 
 
       </li> 
 
       <li class="k-button" deselectable="on"> 
 
       <div> 
 
        <span deselectable="on"> 
 
        <span class="k-state-default">Extended Time - Time and a half (1.5x)</span> 
 
        </span> 
 
       </div> 
 
       </li> 
 
      </ul> 
 
      <input class="k-input k-valid" style="width: 25px;" accesskey="" autocomplete="off" role="listbox" title="" 
 
      aria-expanded="false" tabindex="0" aria-owns="accommodationsMultiselect_taglist accommodationsMultiselect_listbox" 
 
      aria-disabled="false" aria-busy="false" aria-activedescendant="bd81cf39-1dbe-431d-985c-57c3d3a11027" /> 
 
      </div> 
 
      <select id="accommodationsMultiselect" multiple="multiple" name="accommodationsMultiselect" data-role="multiselect" 
 
      style="display: none;" aria-disabled="false" class="k-valid"> 
 
      <option value="b08e686b-01bb-4cce-8aaa-fe836741c98e" selected="selected">Extended Time - Time and a half 
 
      (1.5x)</option> 
 
      <option value="b9812a54-fc87-494b-8bc3-453318143ee5">Double Time (2x)</option> 
 
      <option value="aa562f06-0c72-4bf8-9cd9-3e0b0c9d56df">Mark Answers in Test Booklet</option> 
 
      <option value="79795988-8722-4970-9c20-55cc90c3d732">Large Print Test and Circle Answers in Test Booklet</option> 
 
      <option value="dc4018db-a800-40d6-adbd-1afaefd72ddb" selected="selected">Calculator - provided by family</option> 
 
      <option value="03696d5b-65a9-4f1a-b548-1559ac5bceaf" selected="selected">Computer for Essay</option> 
 
      <option value="d08d568a-4861-4fae-a2e0-cde6f7f9ecec">Computer with Spell Check for Essay</option> 
 
      <option value="81a57096-847c-48c2-a217-eac0ca43eca7">Computer for Essay - provided by family</option> 
 
      <option value="e7eee91c-25a1-471c-9c0e-e1d454061834">Computer with Spell Check for Essay - provided by family</option> 
 
      <option value="f90a8609-6d65-4164-9652-883fbfce4c52">Computer for Essay - computer and printer provided by 
 
      family</option> 
 
      <option value="d25c1216-86e4-4c6b-b4a4-716ccc2ec41f">Computer with Spell Check for Essay - computer and printer 
 
      provided by family</option> 
 
      <option value="b4245a2b-a556-4481-b782-f704ca60bc14">Reader (may have limited availability at select ISEE test 
 
      locations)</option> 
 
      <option value="13fc2384-fa03-4a8a-b883-ffd484961c1e">Scribe (may have limited availability at select ISEE test 
 
      locations)</option> 
 
      <option value="23c68259-6137-4ddf-8208-8d433df65fa2">Scribe for Essay only (may have limited availability at select 
 
      ISEE test locations)</option> 
 
      <option value="1c7347d6-2d59-4670-aecc-cbca9b493d3b">Other (may have limited availability for &quot;Other&quot; 
 
      accommodations requested)</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-10-11 user703163

獲取對多選參考，並簡單地設置.WIDTH（）的是.LIST。

var multiSelect = $("#multiselect").kendoMultiSelect({ 
    animation: false 
}).getKendoMultiSelect(); 
multiSelect.list.width(500); 
// Or even: 
// multiSelect.list.width("auto");

檢查你的http://dojo.telerik.com/@Stephen/uLAbU作爲一個工作的例子。

此技術也適用於DropDownLists和ComboBoxes，也可能是其他「下拉」類型的控件。

來源

2016-10-11 12:52:52

Kendo ui Multselect - 凌駕風格

回答

相關問題