Question

当用户选择值时，我在下拉列表上使用了kendo multiselect，我的文本框会增加。如何在多选中为文本框设置固定大小，并添加滚动条而不是文本框溢出，以便用户可以看到所有选定的值？

HTML

<div class="col-md-8 ">
                    <select kendo-multi-select k-options="riskCauseOptions" 
                    data-text-field="'text'" data-value-field="'id'"
                    ng-model="riskDTO.rskCausCtgyToRiskKyList"
                    size=2
                    required validationMessage="Risk Cause is required"></select>
                </div>

Answer 1

请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
    <style>
        .col-md-8 k-multiselect-wrap {
            max-height: 50px !important;
            overflow: auto !important;
        }
    </style>
</head>
<body>
    <select id="optional" multiple="multiple" data-placeholder="Select attendees...">
        <option>Steven White</option>
        <option>Nancy King</option>
        <option>Nancy Davolio</option>
        <option>Robert Davolio</option>
        <option>Michael Leverling</option>
        <option>Andrew Callahan</option>
        <option>Michael Suyama</option>
        <option>Anne King</option>
        <option>Laura Peacock</option>
        <option>Robert Fuller</option>
        <option>Janet White</option>
        <option>Nancy Leverling</option>
        <option>Robert Buchanan</option>
        <option>Margaret Buchanan</option>
        <option>Andrew Fuller</option>
        <option>Anne Davolio</option>
        <option>Andrew Suyama</option>
        <option>Nige Buchanan</option>
        <option>Laura Fuller</option>
    </select>
    <script>
        $(document).ready(function () {
            var optional = $("#optional").kendoMultiSelect().data("kendoMultiSelect");
        });
    </script>
</body>
</html>

修复了多选中文本框的大小并添加滚动条？

1 个答案: