Kendo ui Multselect - переопределяющий стиль

поэтому у меня есть веб-страница, на которой отображается метка Kendo MultiSelectFor. все работает нормально.Kendo ui Multselect - переопределяющий стиль

Данные пользователя, к сожалению, очень длинны, поэтому выпадающие элементы выбора обернуты. пользователям это не нравится.

Есть ли способ переопределить размер выпадающего списка, который будет шире, чем выбранный список элементов (который находится выше)?

HTML-фрагмент ниже, что у меня есть - (но не будет работать довольно)

До сих пор я пытался переопределить некоторые стили, используя что-то вроде этого:

#accommodationsMultiselect .k- valid { left: -100px; ширина: 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 - переопределяющий стиль

ответ

Смежные вопросы