I am developing Angular application. My dropdown is so long I am not able scroll and page also getting ended. Here using Bootstrap 4.5.0
. How can I add vertical scrollbar in it
This is my code
<div ngbDropdown class="d-inline-block">
<button class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownMap" ngbDropdownToggle>
{{ selectedCountry}}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownMap">
<ng-container *ngFor="let country of mapData">
<button ngbDropdownItem class="dropdown-item" (click)="mapCountry_selected(country)" >
{{country.post}}
</button>
</ng-container>
</div>
</div>
I tried this but not working
.ngbDropdownMenu
{
max-height: 200px;
overflow-y: scroll;
}
.ngbDropdownItem
{
max-height: 200px;
overflow-y: scroll;
}
.ngbDropdown
{
max-height: 200px;
overflow-y: scroll;
}
Fixed this issue by using below code
.dropdown-menu { max-height: 280px; overflow-y: auto; min-width: 100% !important; background-attachment: local, local, scroll, scroll; }
.dropdown-item { white-space: normal; }