React DatePicker calendar showing behind table head
10,335
Solution 1
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;
}
Solution 2
It's because of Material-UI Paper component styles. Paper component has an overflow: hidden style, and by removing it works perfectly.
import Card from "@material-ui/core/Card";
...
<Card>
<DayPickerInput id="servdate" name="servdate" dateFormat="yyyy-mm-dd"/>
</Card>
In style set .MuiCard-root{ overflow: visible!important; }
Author by
xxddoo
Updated on July 24, 2022Comments
-
xxddoo almost 2 years
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; }
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>
This is the image for the problem: