Not sure I understand this patch

.mce-fullscreen
is specific to TinyMCE and, if necessary, should be added in atum/scss/vendor/_tinymce.scss

Overflow is made visible for the ul element wrapping the datepicker

As far as I know, the calendar has a <div> container, not a <ul>

can you explain better?

concerning the mce-fullscreen it looks like some mixup with #24334

concerning the mce-fullscreen it looks like some mixup with #24334

Yes, It was a mix with another issue fix. Apologies for the mistake.

And regarding why making overflow visible fixes the issue is. In the joomla-custom-elements.
The style for joomla-tab > ul is set to overflow-y:hidden which causes it to hide elements that exceed its bound.

In lower screen sizes the date picker element the div itself is going out of the size defined by ul element for its children thus causing it to be hidden.

This is not working here:

The calendar z-index also needs changing.

Please don't add your code to the template.scss. This file is supposed to be used as the base for importing all sub-scss files

The calendar z-index also needs changing.

Please don't add your code to the template.scss. This file is supposed to be used as the base for importing all sub-scss files

Updated the commit to _form.scss file

This is not working here:

I was unable to replicate the issue. Could you give me some more details? It seems fixed for me.

My Configuration :
Windows 10 x64
Google Chrome Version 73.0.3683.86

@Puneet-Jain-18 please test.

I have tested this item ✅ successfully on b15ad3c

I tested the display of the calendar and it is now OK.

Remains an issue here when the window is small enough forces scroll bars to display (Firefox)
In that case we may need to scroll to see the calendar fully, BUT clicking on the scroll bars closes the calendar.

Remains an issue here when the window is small enough forces scroll bars to display (Firefox)
In that case we may need to scroll to see the calendar fully, BUT clicking on the scroll bars closes the calendar.

Eliminated the need for horizontal scrolling. For vertical scrolling in mobiles if we scroll normally using touch then it doesn't close as emulated by chrome, but yes clicking the scrollbar will close it as is the expected browser behavior of taking the focus away from all the elements and giving the focus to body tag, and loosing focus from the input field will close the calendar picker.

I mean a SCSS variable (should already be defined), not CSS variables

I mean a SCSS variable (should already be defined), not CSS variables

Unfortunately, I couldn't find an already defined scss variable to use in the _variables.scss file. created a new one for use.

We use the following breakpoints:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

So you'll want to use:

@include media-breakpoint-down(sm) {
  .js-calendar {
    right: 0;
  }
}

We use the following breakpoints:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

So you'll want to use:

@include media-breakpoint-down(sm) {
  .js-calendar {
    right: 0;
  }
}

Updated

I have tested this item ✅ successfully on e8acf35

@infograf768 please retest

I have tested this item ? unsuccessfully on 4fd3b6c

I have tested this item ? unsuccessfully on 4fd3b6c

I have tested this item ✅ successfully on 4fd3b6c

After following the testing instructions I can confirm that the calender is full accessible.

I have tested this item ✅ successfully on 4fd3b6c

RTC

@Arpit-24 While checking this issue I think the problem is already fixed without your changes. Can you check?

This is what I see without your changes:

@Arpit-24 Never mind, I see the issue in fullscreen mode.

@Arpit-24 Must have been cache because I cannot reproduce the issue again. So can you check if your change is still necessary?

I agree with @roland-d
I cannot reproduce the issue here in 4.0-dev

taking off rtc

Moving to discussion

In fact calendar.js has been modified since April 2019.
I guess this can be closed.

@Arpit-24 Thank you for your contribution, if this issue still exists, feel free re-open the issue and we can check again.