Reactstrap DropdownMenu bottom overflow issue

Question

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?

are you able to show a prototype of the issue? – 95faf8e76605e973 Jul 29 '20 at 02:40 — 95faf8e76605e973, Jul 29 '20 at 02:40

score 3 · Accepted Answer · answered Jul 29 '20 at 03:23

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

score 1 · Answer 2 · answered May 21 '22 at 19:49

1

The previous answer doesn't work for me.

There is another solution from documentation:

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

answered May 21 '22 at 19:49

Alex Shepel

381
5
7

changes the behavior a bit but it works like a charm. – Muhammad Umar Khan Dec 07 '22 at 15:27

Reactstrap DropdownMenu bottom overflow issue

2 Answers2

Linked