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:
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;
}
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With