Question

所以我有一个显示Kendo MultiSelectFor标签的网页。一切正常。

遗憾的是，用户的数据很长，因此下拉选择项会被包装。用户不喜欢这个。

有没有办法覆盖下拉列表的大小，使其比所选项目列表框（位于上方）更宽？

下面的html片段就是我所拥有的 - （但不会跑得很漂亮）

到目前为止，我一直试图使用以下内容覆盖某些样式：

#accommodationsMultiselect .k-valid { 左：-100px;宽度：600px }

到目前为止，我还没有能够影响任何改变。提前谢谢

JB

＆＃13;

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

＆＃13;

Answer 1

获取多选的引用，只需设置它的.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，可能还有其他“下拉”类型控件。

Kendo ui Multselect - 覆盖风格

1 个答案: