Search code examples
cssreactjsbootstrap-4react-bootstrap

How to add scroll bar for React bootstrap DropDown?

I am using react bootstrap dropdown, from here

When the items in my drop down list are many, the list gets overflown vertically which is not responsive as shown in the snapshot enter image description here I want to add a scroll bar to it but am not able to. Please help.

This is my sample code

            <DropdownButton
                id="dropdown-basic-button"
                title={this.props.passenger.seatNumber}
                onSelect={(evt) => this.handleSeatSelection(evt)}
                variant="info"
              >
                {this.state.availableSeatNumbers.map((seatNumber) => (
                  <Dropdown.Item key={seatNumber} eventKey={seatNumber}>
                    {seatNumber}
                  </Dropdown.Item>
                ))}
              </DropdownButton>
Solution

  • You can simply give a fixed height to your dropdown menu class and set the overflow-y to scroll as written below

    .dropdown-menu {
  height: 300px;
  overflow-y: scroll;
}