react-bootstrap 中的可滚动下拉列表 [英] Scrollable drop down lists in react-bootstrap

问题描述

我正在尝试创建一些简单的出生日期下拉列表，并希望在下拉列表中显示固定数量的项目的滚动条.我怎样才能用 react-bootstrap 做到这一点?我的下拉列表目前离开屏幕并触发整个页面上的滚动条.

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.

这是我的代码:

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

推荐答案

您可以通过为 ".dropdown-menu" 元素应用固定高度并设置 "overflow-y: scroll;" 来创建可滚动的下拉菜单

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

反应代码:

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>
    )
  }
}

数量输入.css

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

这篇关于react-bootstrap 中的可滚动下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！