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

【问题标题】：Fixed size of a text box on multiselect and add scrollbar?修复了多选文本框的大小并添加滚动条？
【发布时间】：2015-03-13 21:37:32
【问题描述】：

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

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>

【问题讨论】：

标签： html css kendo-ui

【解决方案1】：

请尝试以下代码 sn-p。

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

【讨论】：

我正在使用 Angularjs，我如何使用 Angular 来实现这一点，我不能使用 jQuery
我为此使用了 CSS，所以我们将使用 jquery 或 anguler 没关系。