如何在打开时减小下拉菜单的大小答案

【问题标题】：How to reduce size of drop down when it opens如何在打开时减小下拉菜单的大小
【发布时间】：2017-10-20 17:06:26
【问题描述】：

我的页面中有一个下拉菜单。单击下拉列表后，它会显示一个长列表并覆盖页面的整个高度。如何仅显示 10 条记录并提供滚动条以查看下拉列表的剩余内容。

<div class="container-fluid">
    <form>
        <div class="row form-group">
            <div class="col-sm-3">
                <label for="drpyear" style="font-weight:bold">Select Year:</label>
                <select class="form-control" [(ngModel)]="selectedModel" data-wrap  (ngModelChange)="yearChanged(selectedModel)" name="drpyear">
                    <option *ngFor="let item of yearlist">{{item.year}}</option>
                </select>
            </div>
        </div>
    </form>
</div>

【问题讨论】：

据我所知，你不能。您必须使用某种自定义控件。我不会担心的。
这正是您所需要的：stackoverflow.com/questions/34164413/…
@I.R.R. - 这与我的问题无关。
你不能直接影响<select>下拉菜单的高度；您唯一的选择是过滤立即显示的结果数量，或使用 JavaScript 解决方案，如 Bootstrap Select（或任何其他无数选项）。

标签： twitter-bootstrap angular

【解决方案1】：

不知道它是否仍然相关，但你能做这样的事情吗？

html:

<mat-menu class="form-control select-style" [(ngModel)]="selectedModel">
    <button (click)="yearChanged(selectedModel)" *ngFor="let item of yearlist">{{item.year}}</button>
</mat-menu>

css:

select-style{
    max-height: 200px;
    overflow-y: auto;
}

编辑：这里是菜单参考https://material.angular.io/components/menu/overview

【讨论】：