We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I'm using react-bootstrap v2.9.2(Bootstrap 5). The dropdown is hidden if the parent has an overflow-y: auto style.
overflow-y: auto
In this case, the dropdown should overlay the parent container.
import Dropdown from 'react-bootstrap/Dropdown';
function BasicExample() { return ( <div style={{height: "100px", overflow: "auto"}}>
Testing Dropdown
https://react-bootstrap.netlify.app/docs/components/dropdowns
Windows
Chrome
v2.9.2
5.2.2
No response
The text was updated successfully, but these errors were encountered:
I don't understand what you are trying to accomplish.
Why do you want to use the overflow-y? Is it supposed to be for a long list of options?
Are you expecting it to look like this:
if so, use this:
import Dropdown from 'react-bootstrap/Dropdown'; function BasicExample() { return ( <Dropdown> <Dropdown.Toggle variant="success" id="dropdown-basic"> Dropdown Button </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item href="#/action-1">Action</Dropdown.Item> <Dropdown.Item href="#/action-2">Another action</Dropdown.Item> <Dropdown.Item href="#/action-3">Something else</Dropdown.Item> </Dropdown.Menu> </Dropdown> ); } export default BasicExample;
If not could you be a little more clear on what you're trying to accomplish and maybe some context why?
Sorry, something went wrong.
No branches or pull requests
Prerequisites
Describe the bug
I'm using react-bootstrap v2.9.2(Bootstrap 5). The dropdown is hidden if the parent has an
overflow-y: auto
style.Expected behavior
In this case, the dropdown should overlay the parent container.
To Reproduce
import Dropdown from 'react-bootstrap/Dropdown';
function BasicExample() {
return (
<div style={{height: "100px", overflow: "auto"}}>
Testing Dropdown
<Dropdown.Toggle variant="success" id="dropdown-basic" drop="up">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
);
}
Reproducible Example
https://react-bootstrap.netlify.app/docs/components/dropdowns
Screenshots
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of React-Bootstrap are you using?
v2.9.2
What version of Bootstrap are you using?
5.2.2
Additional context
No response
The text was updated successfully, but these errors were encountered: