剣道多目的優先スタイル

私は剣道MultiSelectForタグを表示しているWebページを持っています。すべて正常に動作します。剣道多目的優先スタイル

ユーザーのデータは残念ながら非常に長いので、ドロップダウン選択項目はラップされます。ユーザーはこれを好まない。

ドロップダウンリストのサイズを上書きして、選択したアイテムのリストボックス（上にある）よりも広い方法がありますか？

#accommodationsMultiselect .k-：（しかしかなり実行されません）

これまでのところ、私はこのようなものを使用して、いくつかのスタイルを上書きしようとしているが -

下記のHTMLスニペット

は、私が持っているものです有効{ 左：-100ピクセル;幅：600px }

これまでの変更には影響しませんでした。それは.LISTだの事前のおかげで

<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を設定します。

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

実例はhttp://dojo.telerik.com/@Stephen/uLAbUをご確認ください。

このテクニックは、DropDownListsとComboBoxにも機能し、他の "ドロップダウン"タイプのコントロールでも機能します。

出典

2016-10-11 12:52:52

剣道多目的優先スタイル

答えて

関連する問題