Search code examples
htmlcssangulartwitter-bootstrapng-bootstrap

How to make Bootstrap dropdown's vertical scrollbar


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

Solution

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