CODEWITHSUNDEEP
cssreactjscss-selectors
Dhanuka Perera
Dhanuka Perera

Reputation: 1803

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?

Upvotes: 0

Views: 3701

Answers (1)

Jay Lu
Jay Lu

Reputation: 1745

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 !

Upvotes: 2

Related Questions