I'm having trouble with react-datepicker position

Question

I'm using react-datepicker but for some reason it is showing the calendar behind a container.

I have tried:

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

but it doesn't work.

Here is the Date Picker component

<DatePicker
     selected={startDateSingleDay}
     onChange={onChangeDatePickerStartDateSingleDay}
     dateFormat="yyyy-MM-dd"
     className="text-center"
     showMonthDropdown
     showYearDropdown
     dropdownMode="select"
     onChangeRaw={handleDateChangeRaw}
     popperClassName="date-picker-reports"
     placeholderText="Choose a date"
   />

Any suggestions?

Answer 1

This is tested for react-datepicker 4.2.1

Adding a prop portalId should automatically fix the issue.

According to its documentation If the provided portalId cannot be found in the dom, one will be created by default with that id passed in the prop.

<DatePicker
 portalId="root-portal"
 selected={startDateSingleDay}
 onChange={onChangeDatePickerStartDateSingleDay}
 dateFormat="yyyy-MM-dd"
 className="text-center"
 showMonthDropdown
 showYearDropdown
 dropdownMode="select"
 onChangeRaw={handleDateChangeRaw}
 popperClassName="date-picker-reports"
 placeholderText="Choose a date" 
/>