The Material Expansion Panel here: https://material-ui.com/demos/expansion-panels/ and the react date picker here: https://www.npmjs.com/package/react-date-picker are the components in question.

The Question is, I have an expansion panel that's expanded with 2 date picker fields inside. When the user opens these date-picker fields the calendar that pops-up is hidden by the top of the expansion panel (the height of the panel is the issue). It should appear in front of everything however I can't seem to figure out how to feed the calendar component a z-index that will put it in front of the rest of the components.

So far I tried to set the styling of the expansion panel for for {overflow: 'visible'} but no luck the calendar still appears behind the top of the expansion panel.

Below are the styles and the html for the expansion panel. A method to change the z-index of the calendar or another approach to how I could fix the display would be nice.

 <ExpansionPanel
                  className={classes.expansionPanelExpanded}
                  >
                  <Grid container spacing={16}>
                    {this.renderChart()}
                    <Grid item xs={6} className={classes.grid}>
                      <FormControl
                            *a form component*
                      </FormControl>
                    </Grid>

                    <Grid item xs={6} className={classes.grid}>
                        <FormControl
                            * a form component
                        </FormControl>
                      )}
                    </Grid>

                    <Grid item xs={6} className={classes.datePicker}>
                      <div>
                        <InputLabel className={'date-label'}  htmlFor="name-disabled">Start Date *</InputLabel>
                      </div>
                      <FormControl
                        className={classes.formControl + ' ' + 'date-form'}
                        error={this.hasError('startDate')}
                        aria-describedby="startDate-error-text">
                        <DatePicker
                          name="StartDate"
                          clearIcon={null}
                          value={Moment(values.startDate, 'YYYY/MM/DD').toDate()}
                          onChange={(e) => {this.handleDateChange(e, 'start')}}
                          minDate={minDate}
                        />
                        {this.hasError('startDate') && (
                          <FormHelperText id="startDate-error-text">{errors.startDate}</FormHelperText>
                        )}
                      </FormControl>
                    </Grid>

                    <Grid item xs={6} className={classes.datePicker}>
                      <div>
                        <InputLabel className={'date-label'}  htmlFor="name-disabled">End Date *</InputLabel>
                      </div>
                      <FormControl
                        className={classes.formControl  + ' ' + 'date-form'}
                        error={this.hasError('endDate')}
                        aria-describedby="endDate-error-text">
                        <DatePicker
                          name="EndDate"
                          clearIcon={null}
                          value={Moment(values.endDate, 'YYYY/MM/DD').toDate()}
                          onChange={(e) => {this.handleDateChange(e, 'end')}}
                          minDate={Moment(values.startDate, 'YYYY/MM/DD').toDate()}
                          maxDate={maxDate}
                        />
                        {this.hasError('endDate') && <FormHelperText id="endDate-error-text">{errors.endDate}</FormHelperText>}
                      </FormControl>
                    </Grid>
                  </Grid>
                </ExpansionPanel>

The CSS Styles:

const materialStyles = (theme: Theme) =>
  createStyles({
    container: {
      overflow: 'visible'
    },
    group: {},
    formControl: {
      marginBottom: '20px'
    },
    dialog: {
      padding: '20px'
    },
    expansionPanelExpanded: {
      boxShadow: 'none',

    },
    gridChart: {
      marginBottom: '5px'
    },
    grid: {
    },
    datePicker: {
      marginTop: 10
    },
    radio: {
      zIndex: -1,
      root: {
        color: '#1a5336',
        '&$checked': {
          color: '#1a5336'
        }
      },
      checked: {}
    },
    submit: {}
  })

0 Answers