Exploring the issue further, I have provided examples and a sandbox for better understanding. Take a look at this sandbox link with all dependencies included.
In the image below, you can see that my dropdown menu is hidden behind other elements and only partially visible:
https://i.sstatic.net/tixzD.png
Compare it to how a standard dropdown should appear:
https://i.sstatic.net/6ticc.png
I suspected that the issue might relate to the z-index. Despite setting z-index: 1000;, the element remains invisible, as seen in the inspect screenshot below:
https://i.sstatic.net/sXjbU.jpg
Interestingly, there is another dropdown within a header using react-bootstrap that displays correctly even when the header's position is changed from fixed to static, as demonstrated here:
https://i.sstatic.net/Ftg24.jpg
I've spent weeks trying to solve this problem without success. Any insights or assistance would be greatly appreciated. Thank you in advance.
import React from "react";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import { Dropdown } from "react-bootstrap";
function UsersAdmin() {
const users = [
{
id: 1,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{...}
{...}
];
const columns = [
{...}
{...}
{...}
];
return (
<>
<div className="container-fluid">
<div className="p-3">
<h2>{"language item"}</h2>
</div>
<div className="card" style={{ width: "100%" }}>
<div className="card-body">
<DataTableExtensions exportHeaders columns={columns} data={users}>
<DataTable
columns={columns}
data={users}
pagination
defaultSortAsc={false}
defaultSortField="updated_at"
noHeader
/>
</DataTableExtensions>
</div>
</div>
</div>
</>
);
}
export default UsersAdmin;