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