Bug: Dropdown "up" not working

[nikischin]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

On the dropdown the prop drop='up' is not working and still opening the dropdown menu on the bottom of the dropdown button.

Expected behavior

The dropdown should be opened on top not bottom.

To Reproduce

See at official documentation, also not working there.

Reproducible Example

https://react-bootstrap.github.io/docs/components/dropdowns#drop-directions

Screenshots

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Safari

What version of React-Bootstrap are you using?

2.9.0

What version of Bootstrap are you using?

5.*

Additional context

No response

[kyletsang]

This is due to the example container not having enough space to do the positioning. If you were to add a large margin to the top, it will position at the top. We should fix this example.

[nikischin]

This is due to the example container not having enough space to do the positioning. If you were to add a large margin to the top, it will position at the top. We should fix this example.

Thank you so much for your fast answer! This helped a lot!

[troytomasch]

Was looking into a fix for this. Adding a chunk of padding at the top seems like an ugly solution but it maintains the simplicity of the code. The other option seems to be spacing out the top and the bottom row a little more and including the drop="up" dropdowns only in the bottom row so they have the space to expand upward. However, this option would involve lengthening the code snippet. @kyletsang and @nikischin, would love to hear your thoughts on these ideas.

Also, there is a similar problem with the drop="end" dropdowns where they drop the wrong direction but putting them further up in the order should be an easy fix.

[nikischin]

If you would be able to remove the overflow: hidden from the .playgroundContainer_TGbA, this would also solve the issue (or overrite it with another class providing overflow: visible), however, I don't know if this would be the easiest solution.

[sarathkumarsasi]

Hi @kyletsang, Can I work on this issue?

[kyletsang]

@sarathkumarsasi sure go for it