reactjs - Reactstrap DropdownMenu底部溢出问题

Question

我已经搜索了 reactstrap 文档，但不幸的是它只提供了 DropdownMenu:right 属性。我想要实现的是以某种方式自动对齐底部的下拉菜单，使其不会溢出。

import { 
    UncontrolledButtonDropdown,
    DropdownToggle, 
    DropdownMenu, 
    DropdownItem
} from "reactstrap";

<UncontrolledButtonDropdown direction="left">
    <DropdownToggle color="secondary" size="sm">
        <i className="pe-7s-more btn-icon-wrapper"></i>
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem onClick={some_action}>{some_label}</DropdownItem>
    </DropdownMenu>
</UncontrolledButtonDropdown>

有什么办法可以解决这个问题吗？

Answer 1

发生这种情况是因为您的 overflow:hidden/scroll/auto 容器。这是标准 CSS 行为，因为它将隐藏不再适合容器定义尺寸的内容。 Reactstrap 使用 positionFixed 属性处理这种情况。这将简单地将弹出框项目定位为固定元素，以便它不再相对于溢出:隐藏/滚动/自动容器除非容器具有 transform 属性。

<DropdownMenu positionFixed={true}>
    ...
</DropdownMenu>

CodeSandBox:https://codesandbox.io/s/vibrant-hermann-157ez?file=/src/App.js