Search code examples
cssdialogmaterial-ui

react-date-picker in Material ui Dialog Cuts off datepicker

Hi I'm having Datepicker (based on the react-date-picker package) inside Material ui Dialog.Dialog works perfectly but When i click on datepicker it scrolling down and cuts off and scroll showing.

this is my Example how do i overcome this with css

overflow scroll couldn't solved the issue because i'm having a list item

Solution

  • I have fixed the issue. Note this only work for some cases. Because the cut off issue has only happened to the first row in my case. You can fix with first child in CSS

    I have applied the position to the calendar only when it at first child 

    .react-calendar {

position: fixed !important;
top: calc(100% - 479px) !important;

}

    if you are having an issue, please Modify your modal first . This only happens using on modal.

    I'm just a beginner to CSS so this one came first and it worked for me . Thanks @Dekel