反应DatePicker日历显示在表头后面 [英] React DatePicker calendar showing behind table head

问题描述

我在我的项目中使用react datePicker和fixed-data-table-2.当我打开日历时，它显示在表头后面.这是CSS文件的代码:

I was using react datePicker and fixed-data-table-2 for my project. When I open the calendar, it shows behind table head. Here is the code for CSS file:

.ui-datepicker {
   z-index: 9999 !important;
}
.table{
   z-index: -1000  !important;
}

以下是DatePicker的React代码:

Here is React Code for DatePicker：

 <div className='ui-datepicker'>
           <DatePicker
                 selected={this.state.startDate}
                 selectsStart
                 startDate={this.state.startDate}
                 endDate={this.state.endDate}
                 onChange={this.onFilterStart}
            />
</div>

这是表格的快捷方式代码:

Here is shortcut code for Table:

<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>

这是问题的图像:

推荐答案

尝试在 .react-datepicker-popper 而不是datepicker上设置z-index.这是react-date-picker在其创建的弹出窗口中使用的className.

Try setting the z-index on .react-datepicker-popper instead of on datepicker. That's the className that react-date-picker uses on the popup it creates.

.react-datepicker-popper {
    z-index: 9999 !important;
}

这篇关于反应DatePicker日历显示在表头后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！