Reactstrap DropdownMenu 底部溢出问题答案

【问题标题】：Reactstrap DropdownMenu bottom overflow issueReactstrap DropdownMenu 底部溢出问题
【发布时间】：2020-11-18 13:26:54
【问题描述】：

我搜索了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>

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

【问题讨论】：

你能展示这个问题的原型吗？
用代码更新帖子

标签： reactjs reactstrap

【解决方案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

【讨论】：

console.log(salamat pre)