标题几乎说明了一切。但是这里我提供了一些示例和一个沙箱供您查看我在说什么。
这是我创建并添加了所有依赖项的沙箱的链接。
正如您在第一张图片中看到的那样，我的下拉菜单位于所有内容的后面，其中一部分实际上被隐藏了。它在那里但不可见
这是下拉列表的样子：
我心想，问题可能是因为z-index. 但是该元素z-index: 1000;应用了一种样式，您可以在下图中的 chrome 检查中看到应用的样式和选定的元素。如您所见，元素的整个矩形在检查中突出显示，但不可见。
但是里面有一个position: fixed;带有下拉菜单的标题，它也使用 react-bootstrap 下拉菜单。但它显示完美，没有任何问题。我给该标题一个静态位置，这是结果。下拉菜单仍然完美显示。
我一直在思考和搜索这个问题好几个星期，但仍然找不到解决方案。任何帮助将不胜感激，并在此先感谢您。
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"
},
{
id: 2,
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"
},
{
id: 3,
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 = [
{
name: "language item",
selector: "id",
sortable: true,
width: "90px"
},
{
name: "language item",
selector: "first_name",
sortable: true
},
{
name: "language item",
selector: "last_name",
sortable: true
},
{
name: "language item",
selector: "email",
sortable: true,
grow: 1.5
},
{
name: "language item",
selector: "mobile",
sortable: true
},
{
name: "language item",
selector: "created_at",
sortable: true,
grow: 2
},
{
name: "language item",
cell: (row) => (
<div style={{ width: 50, height: 50 }}>
<img
src={`${process.env.REACT_APP_BASE_URL}/storage/${row.avatar}`}
style={{ width: "100%", borderRadius: "50%" }}
/>
</div>
),
width: "75px"
},
{
name: "language item",
cell: (row) => (
<Dropdown>
<Dropdown.Toggle size="sm" />
<Dropdown.Menu size="sm">
<Dropdown.Item>
<i className="fa fa-edit mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="mdi mdi-eye mr-1" /> {"language item"}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
),
width: "75px"
}
];
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;