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 react-bootstrap? My drop down lists at present go off the screen and trigger scrollbars on the whole page.

Here is my code:

<FormGroup>
  <Col componentClass={ControlLabel} sm={3}>
    Birth Date
  </Col>
  <Col sm={9}>
    <DropdownButton title="Month" id="birth-month">
      {createMonthSelectItems()}
    </DropdownButton>
    <DropdownButton title="Day" id="birth-day">
      {createDayOfMonthSelectItems()}
    </DropdownButton>
    <DropdownButton title="Year" id="birth-year">
      {createYearSelectItems()}
    </DropdownButton>
  </Col>
</FormGroup>

Also, please advise whether this is even a good idea. I need this UI to work nicely on mobile devices as well as desktop.

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 (
      <DropdownButton
        bsStyle="default"
        bsSize="small"
        style={{ maxHeight: "28px" }}
        title={"Qty"}
        key={1}
        id="dropdown-size-small"
      >
        <MenuItem eventKey="1">Action</MenuItem>
        <MenuItem eventKey="2">Another action</MenuItem>
        <MenuItem eventKey="3" active>
          Active Item
        </MenuItem>
        <MenuItem divider />
        <MenuItem eventKey="4">Separated link</MenuItem>
      </DropdownButton>
    )
  }
}

QuantityInput.css

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

Answer 2

use this style for scrollable DropdownButton

ul.dropdown-menu {
    max-height: 500px;
    overflow-y: scroll;
}

Answer 3

Here's a possible solution that will scale the max height of the element dynamically based on viewport height:

import React, { Component } from 'react'
import { Button, Dropdown, MenuItem } from 'react-bootstrap'

export default class CustomDropdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }
    toggle = () => {
        this.setState({ open: !this.state.open });
    }
    onToggle = (isOpen, e, source) => {
        //This closes the menu on toggling the dropdown or hitting esc.
        if (source.source === 'click' || source.source === 'rootClose') {
            this.toggle();
        }
    }

    render(){
        <div ref={(ref) => this.myRef = ref} className='CustomDropdown'>
            <Dropdown open={this.state.open}
                    onToggle={this.onToggle}
                    id={'Dropdown'}
                >
                <Button onClick={this.toggle}
                >{this.props.myTitle ? this.props.myTitle : 'Click Me'}</Button>
                 <Dropdown.Toggle style={{ textAlign: right, paddingBottom: 5 }} />
                <Dropdown.Menu style={{overflowY: 'scroll', maxHeight: (window.innerHeight - (this.myRef ? (this.myRef.getBoundingClientRect().top + this.myRef.getBoundingClientRect().height + 100) : 200))}}>
                    ... add menu items here
                </Dropdown.Menu>
            </Dropdown>
        </div>
    }
}