Scrollable drop down lists in react-bootstrap

Question

I am trying to create some simple birth date dropdowns and would like to have scroll bars on the dropdown lists with a fixed number of items shown. How can I do this with re

Answer 1

You can create scrollable dropdown by applying fixed height for the ".dropdown-menu" element and set "overflow-y: scroll;"

React Code:

import React, { Component } from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import './QuantityInput.css'

export default class QuantityInput extends Component {
  render() {
    return (
      
        Action
        Another action
        
          Active Item
        
        
        Separated link
      
    )
  }
}

QuantityInput.css

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