Question

我的页面中有一个下拉列表。单击下拉列表后，它会显示一个长列表并覆盖页面的整个高度。如何只显示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>

Answer 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

如何在打开时减小下拉的大小

1 个答案: