When the user clicks on an HTML <select> element, it will drop either up or down depending on its position relative to the edge of the window. If it is too close to the bottom, then it will drop up. How can I get this same behavior from React Bootstrap's Dropdown component?
Asked
Active
Viewed 148 times
0
Code-Apprentice
- 81,660
- 23
- 145
- 268
-
check their source code to see how they implemented? – Arup Rakshit Jun 18 '18 at 15:36
1 Answers
0
(Assuming you're referring to React-Bootstrap)
The docs say to use the dropup prop as part of the dropdown.
<!-- example from docs -->
<ButtonToolbar>
<SplitButton title="Dropup" dropup id="split-button-dropup">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</SplitButton>
</ButtonToolbar>
DC.Azndj
- 1,346
- 12
- 13
-
This will unconditionally dropup. I need the component to only dropup if dropping down will render below the bottom edge of the window. – Code-Apprentice Jun 18 '18 at 16:27
-
1Ah, gotcha. Sorry for the misunderstanding. Looking through the component code and the docs, there's no automatic way to do it. If you want to do it manually, you would check bottom border of the dropdown (before or after the dropdown menu appears), check the distance to the [bottom of the viewport](https://stackoverflow.com/a/8876069/6292679), and see if the dropdown goes beyond the viewport. If so, add the `dropup` prop. Otherwise, remove the prop. – DC.Azndj Jun 18 '18 at 18:08