How to make Bootstrap dropdown's vertical scrollbar

user_8977696 0
Viewed 2850

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;
}
ng-bootstrap twitter-bootstrap angular css html
3 Answers

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

You can work with the "overflow" attribute in your css-file or directly manipulate the attribute in your style.

If the dropdown is too long vertically, choose the behaviour for overflow-y that you would like to see

If the dropdown is too wide, choose the behaviour for overflow-x that you would like to see.

Possible behaviours include e.g. a permanent scrollbar or clipping of content that extends over the edges of the element.

Edit: Also, your assignment of classes to your divs is not valid html, so try changing your code to the following (the class name from your css file has to be in the class tag of the div you want to be affected):

<div class="ngbDropdown d-inline-block">
<button class="btn btn-secondary btn-sm dropdown-toggle" 
id="dropdownMap" ngbDropdownToggle>
 {{ selectedCountry}}
</button>
<div class="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>
user_140060870

For future readers using Bootstrap 5, the dropdown markup has changed slightly as it now uses the data-bs- attributes. You can make the dropdown scrollable by setting a max-height and overflow..

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Demo

user_1714560
Related