css - ReactStrap：当下拉列表很长时，用户看不到最后的值

Question

我有这个下拉列表：

如您所见，它占据了整个屏幕，并且隐藏了一些项目。
这是代码：

  const statusSearchDropDownValues = (
  <Row className="align-items-center">
    <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
      <Dropdown
        isOpen={this.state.statusSearchropDownOpen}
        toggle={() => {
          this.toggleStatusSearchDropDown();
        }}
      >
        <DropdownToggle className="my-dropdown" caret>
          {this.state.statusSearchDropDownValue}
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem>
            {" "}
            <div
              value="operation_cree"
              onClick={this.changeStatusSearchDropDownValue}
            >
              Operation créée
            </div>
          </DropdownItem>
          {/* Multiple other DropdownItems */}
        </DropdownMenu>
      </Dropdown>
    </Col>
  </Row>
);

由于它很长，用户无法看到最后的值。我已经搜索了如何使其可滚动。但是，我什么也没找到。关于如何解决这个问题的任何建议？

标签： cssreactjstwitter-bootstrapbootstrap-4reactstrap

Answer 1

尝试将此样式添加到 DropdownMenu 元素：

...
 <DropdownMenu style={{maxHeight:"200px", overflow:"scroll"}}>
...