css - React DatePicker 日历显示在表头后面
问题描述
我在我的项目中使用了 react datePicker 和 fixed-data-table-2。当我打开日历时,它显示在表头后面。这是CSS文件的代码:
.ui-datepicker {
z-index: 9999 !important;
}
.table{
z-index: -1000 !important;
}
这是 DatePicker 的 React 代码:</p>
<div className='ui-datepicker'>
<DatePicker
selected={this.state.startDate}
selectsStart
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this.onFilterStart}
/>
</div>
这是表格的快捷代码:
<div className='table'>
<Table
rowHeight={50}
rowsCount={tableData.getSize()}
width={1000}
maxHeight={1800}
height={700}
groupHeaderHeight={30}
headerHeight={50}
onColumnResizeEndCallback={this.resizeEndCallback}
isColumnResizing={false}
>
<ColumnGroup
header={<Cell>Basic Info</Cell>}>
<Column columnKey='menuTranslation'
header={ <SortHeaderCell
languageChosen={this.state.languageChosen}
onSortChange={this.sortChange}
sortDir={colSortDirs.foodName}>Food
Name</SortHeaderCell>}
isResizable={true}
width={columnWidths.foodName}
cell={<MyTextCell data={tableData}
field='menuTranslation' col="menuTranslation" />}
/>
<div>
这是问题的图像:
解决方案
尝试将 z-index 设置为 on.react-datepicker-popper
而不是 datepicker。这就是 react-date-picker 在它创建的弹出窗口中使用的类名。
.react-datepicker-popper {
z-index: 9999 !important;
}
推荐阅读
- angular - Angular 6 样式背景图像返回空值未更新
- c# - C#尝试下载网站源但远程服务器返回400
- php - PHP:是否可以对变量的值执行 $_REQUEST
- javascript - 为什么可选择的项目列表在 Django 中不起作用?
- angular - ng build 找不到存在的 index.ts
- python - 基于列名是否在 DataFrame 中的多个 groupby 函数
- java - 使用徽章在 android 中通知用户新消息
- python - 将句子中的连续符号或单词分组
- azure - Azure AD Jwt 令牌验证没有互联网
- python - 如何在whatsap上保存硒会话