反応起動ストラップのスクロール可能なドロップダウンリスト

Question

私は単純な生年月日のドロップダウンを作成しようとしており、ドロップダウンリストに一定数のアイテムが表示されているスクロールバーを使用したいと考えています。どのように私は反応ブートストラップでこれを行うことができますか？私の現在のドロップダウンリストは画面から消え、ページ全体でスクロールバーを起動します。ここで

が私のコードです：また

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

、これも良い考えであるかどうかをアドバイスしてください。このUIは、モバイルデバイスやデスクトップでうまく機能するために必要です。

Answer 1

".dropdown-menu"要素の固定高さを適用し、 "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> 
    ) 
    } 
} 

QuantityInput.css

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

：

は、コードに反応します