cssreactjscss-selectors

React modern calendar datepicker Overlaps with datepicker inputs below

I am using react-modern-calendar-datepicke in table. In my application, there is date-picker in every row. When the date picker opens from the bottom it's overlapping the values of the date pickers in the below rows.

Check my sample in the sandbox: Open Sandbox

enter image description here

But it works fine when the calendar opens from the top. enter image description here

I tried to change the z-index but didn't work for me. Does anyone have any solution for this issue?

Solution

  • It need to change position and z-index on parent element.

    Here is simple demo : (Full code you can check bottom SandBox)

              <td style={{ position:"relative", zIndex:"999" }}>
            <DatePicker
              value={selectedDay}
              onChange={setSelectedDay}
              inputPlaceholder="Select a day"
              shouldHighlightWeekends
            />
          </td>

    Also I modify your code, hope to help you !

    Code Sample for you :

    Edit TextField selectionStart

    P.S. this solution which is also I use in my project.

    Before fixed : enter image description here

    After fixed : enter image description here

    Hope to help you !