How to reduce size of drop down when it opens

Question

I have a dropdown in my page. After I click on dropdown it displays a long list and covers the full height of the page. How can I display only 10 records and provide scroll bar to see remaining content of dropdown.

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

You can't, to my knowledge. You'd have to use some sort of custom control. I wouldn't worry about it. — ceejayoz, Oct 20 '17 at 17:07
This is exactly what you need: https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor — Iskandar Reza, Oct 20 '17 at 17:13

score 0 · Answer 1 · answered Feb 19 '18 at 22:36

Don't know if it is still relevant, but could you do something like this?

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

edit: here is the menu reference https://material.angular.io/components/menu/overview

How to reduce size of drop down when it opens

1 Answers1