When in portrait mode, there is ample space for the drop-down menu to display below the button you click to reveal it:
https://i.sstatic.net/WEgYl.png
However, when the screen size shrinks (such as in landscape mode on certain mobile devices), the menu's position shifts upwards and covers the icon:
https://i.sstatic.net/VLvXV.png
This can make it challenging to close the menu without exiting landscape mode.
I am utilizing the same example found in ReactStrap's documentation here:
import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
const Example = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return (
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Some Action</DropdownItem>
<DropdownItem disabled>Action (disabled)</DropdownItem>
<DropdownItem divider />
<DropdownItem>Foo Action</DropdownItem>
<DropdownItem>Bar Action</DropdownItem>
<DropdownItem>Quo Action</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
export default Example;
I am looking for a solution to prevent the drop-down menu from shifting its position on screens that do not have enough height to accommodate the full menu.