CODEWITHSUNDEEP
reactjsreactstrap
Jeff
Jeff

Reputation: 850

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?

Upvotes: 2

Views: 3767

Answers (2)

Alex Shepel
Alex Shepel

Reputation: 686

The previous answer doesn't work for me.

There is another solution from documentation:

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

Upvotes: 3

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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

Upvotes: 3

Related Questions