I am facing an issue with a dropdown menu embedded inside a table:
https://i.sstatic.net/iOusF.png
The dropdown list is quite long with 16 items. However, when I try to scroll down to access the last items, the entire table scrolls down along with the dropdown list. This makes it difficult to reach the end of the list and results in a messed-up UI.
Here is the code for the dropdown list:
const statusDropDown = (
<Dropdown
isOpen={this.state.statusUpdateDropDownOpen}
toggle={this.toggleStatusUpdateDropDown}
// scrollable={true}
>
<DropdownToggle className="my-dropdown" caret>
{this.state.statusUpdateDropDownValue}
</DropdownToggle>
<DropdownMenu>
{Object.entries(listeDesStatus).map(([key, value], i) => {
console.log("INSIDE TABLE, value is");
console.log(value);
return (
<DropdownItem
key={i}>
<div value={key} onClick={this.changeStatusUpdateDropDownValue}>
{value}
</div>
</DropdownItem>
);
})}
</DropdownMenu>
</Dropdown>
);
This dropdown list is rendered within the table like this:
<tbody>
{Object.entries(this.state.operationSavInformation).map(
([key, value]) =>
key !== "id" &&
(key === "Status" ? (
<tr key={key}>
<td>{key}</td>
<td>
{statusDropDown}
</td>
</tr>
) : (
<tr key={key}>
<td>{key}</td>
<td>
<strong>{value}</strong>
</td>
</tr>
))
)}
</tbody>
After some research, I found that setting a fixed height for the dropdown list might resolve this issue:
const statusDropDown = (
<Dropdown
isOpen={this.state.statusUpdateDropDownOpen}
toggle={this.toggleStatusUpdateDropDown}
// scrollable={true}
>
<DropdownToggle className="my-dropdown" caret>
{this.state.statusUpdateDropDownValue}
</DropdownToggle>
<DropdownMenu style={{ maxHeight: "28px" }}>
{Object.entries(listeDesStatus).map(([key, value], i) => {
console.log("INSIDE TABLE, value is");
console.log(value);
return (
<DropdownItem
key={i}>
<div value={key} onClick={this.changeStatusUpdateDropDownValue}>
{value}
</div>
</DropdownItem>
);
})}
</DropdownMenu>
</Dropdown>
The result can be seen here:
https://i.sstatic.net/d4zAv.png
Although this has partially resolved the issue by allowing access to the last items in the list, it has caused unexpected behavior with the first element. What I actually want is to fix the height of the dropdown list and make it scrollable so that only two items are displayed, and users can scroll down to view the rest. Is this possible?