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 属性处理这种情况。这将简单地将弹出项定位为 fixed 元素，以便它不再相对于 overflow: hidden/scroll/auto 容器除非容器具有 transform 属性.

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

代码沙盒：https://codesandbox.io/s/vibrant-hermann-157ez?file=/src/App.js

Answer 2

之前的答案对我不起作用。

documentation还有一个解决方案：

<DropdownMenu container={'body'}>
    ...
</DropdownMenu>

Reactstrap DropdownMenu 底部溢出问题

Reactstrap DropdownMenu bottom overflow issue

reactjs

reactstrap