CODEWITHSUNDEEP
cssreactjsmaterial-ui
ali ahmadi
ali ahmadi

Reputation: 199

My datepicker's calendar opens behind the Card component

I am using a Shamsi Calendar and it goes behind the <Card> i used in Material UI, i tried setting the z-index of the Calendar, and also putting the whole thing inside a div and then giving it another z-index and of course giving them both a relative position, but still no luck!
Here is a minimal sample of what i just explained:
https://codesandbox.io/s/objective-meadow-ergj0?fontsize=14
As you can see after you click on the DatePicker, it goes behind the second Card.
I feel like this is something Material UI related, specially because the Calendar component is kinda used by many others and it shouldn't have such an obvious bug, maybe i am missing something when giving the styles to the component ? and i have to change my approach when i work with Material UI?

Upvotes: 3

Views: 5351

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81106

This behavior is due to Material-UI's Card having CSS of overflow: hidden. Since the date picker is being displayed within the card, it gets cut off at the card's bottom edge.

In this modified version of your sandbox, I have set overflow to visible. This makes the date picker visible, but has some side effects on the Card that may be undesirable.

This is primarily an issue with this date picker. It would behave in a more robust manner if it rendered the popup portion using a portal rather than rendering it immediately after the date input. It would then leverage the position of the date input to set the popup's position. This is, however, more complicated to implement than how it works now, but would get rid of side effects on the date popup caused by the styling of the date input's container.

Upvotes: 2

Falah Abu Hassan
Falah Abu Hassan

Reputation: 115

The problem seems to be from the package css itself. Try changing the position in .Calendar from relative to fixed.

Make a copy of the CSS to your src file and import it instead of importing it from the package, then modify the following:

.Calendar {

  --cl-color-black: #444444;
  --cl-color-disabled: #d4d4d4;
  --cl-color-error: #ff2929;
  --animation-duration: 0.4s;
  font-size: 10px;
  background: #fff;
  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07);
  border-radius: 1em;
  position: relative;
  user-select: none;
  padding-top: 3.2em;
  display: flex;
  flex-direction: column;
  width: 33em;
  max-width: 90vw;
  min-height: 36.7em;

}

to

.Calendar {
...
  position: fixed;
...
}

in the react-persian-calendar-date-picker/lib/DatePicker.css file of the package.

As for the left part that is not shown, this is because the button is supposed to be in the center of the datepicker. You could move the whole component or you could remove the margin and transform from .datepicker style.

.DatePicker__calendarContainer {
  position: absolute;
  top: calc(100% + 2em);
  /* left: 50%;                           Comment these out
  transform: translateX(-50%); */         /*Comment these out*/
}

Upvotes: 0

Related Questions