Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference:
const statusSearchDropDownValues = (
<Row className="align-items-center">
<Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<Dropdown
isOpen={this.state.statusSearchropDownOpen}
toggle={() => {
this.toggleStatusSearchDropDown();
}}
>
<DropdownToggle className="my-dropdown" caret>
{this.state.statusSearchDropDownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
{" "}
<div
value="operation_cree"
onClick={this.changeStatusSearchDropDownValue}
>
Operation créée
</div>
</DropdownItem>
{/* Multiple other DropdownItems */}
</DropdownMenu>
</Dropdown>
</Col>
</Row>
);
The length of the dropdown list is causing the last values to be out of view. I have tried to make it scrollable without success. Any suggestions on how to resolve this? Thank you!