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
– 95faf8e76605e973

2020-07-29 02:40:28 +00:00
Commented Jul 29, 2020 at 2:40 — 95faf8e76605e973
– 95faf8e76605e973, Commented Jul 29, 2020 at 2:40
updated post with code

Jeff
– Jeff

2020-07-29 03:00:22 +00:00
Commented Jul 29, 2020 at 3:00 — Jeff
– Jeff, Commented Jul 29, 2020 at 3:00

95faf8e76605e973 · Accepted Answer · 2020-07-29 03:23:28Z

3

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

answered Jul 29, 2020 at 3:23

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeff Over a year ago

console.log(salamat pre)

KingJoeffrey Over a year ago

They removed this in reactstrap 9.... any fix for this?

Alex Shepel · Accepted Answer · 2022-05-21 19:49:05Z

3

The previous answer doesn't work for me.

There is another solution from documentation:

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

answered May 21, 2022 at 19:49

Alex Shepel

7369 silver badges8 bronze badges

1 Comment

Muhammad Umar Khan Over a year ago

changes the behavior a bit but it works like a charm.

Collectives™ on Stack Overflow

Reactstrap DropdownMenu bottom overflow issue

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related