Search code examples
reactjsreactstrap

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.

enter image description here

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?

Solution

  • 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