Reactstrap DropdownMenu bottom overflow issue

问题

I have searched the reactstrap docs but unfortunately it only provides DropdownMenu:right property. What I wanted to achieve is to somehow auto align the drop menu on the bottom such that it won't overflow.

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>

Is there any way i can get around this issue?

回答1:

This happens because of your overflow: hidden/scroll/auto container. This is standard CSS behavior in that it will hide the content that no longer fits the container's defined dimensions. Reactstrap handles this scenario with the positionFixed prop. This will simply position the popover item as a fixed element so that it is no longer relative to the overflow: hidden/scroll/auto container unless the container has transform properties.

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

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

来源：https://stackoverflow.com/questions/63145413/reactstrap-dropdownmenu-bottom-overflow-issue