0

Kendo MultiSelectFor タグを表示する Web ページがあります。すべて正常に動作します。

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

ドロップダウンリストのサイズをオーバーライドして、選択したアイテムのリストボックス (上にある) よりも広くする方法はありますか?

以下のHTMLスニペットは私が持っているものです-（しかし、うまく動作しません）

これまでのところ、次のようなものを使用していくつかのスタイルをオーバーライドしようとしています:

#accommodationsMultiselect .k-valid { left:-100px; 幅: 600px }

これまでのところ、変更に影響を与えることはできませんでした。前もって感謝します

JB

<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>

4

1 に答える 1

0

multiselect への参照を取得し、.list の .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 と ComboBoxes にも機能し、おそらく他の「ドロップダウン」タイプのコントロールにも機能します。

于 2016-10-11T12:52:52.920 に答える