DateTime picker position is wrong in IE and Firefox

amoso.miso

The date picker on IE and Firefox does not take into consideration the "scrollTop" value. This causes the datepicker to go to above the field when it does not need to be.

This can be fixed by doing the following:

Change _position function in DateTime:

        var scrollTop = $('body').scrollTop();

To:

        var scrollTop = $('body').scrollTop();
        scrollTop = scrollTop > 0 ? scrollTop : $('html').scrollTop();

Can we please fix this on the next version?

allan

Hi,

I haven't been able to reproduce that on this page. Could you let me know how I can do so, so I can fully debug and test this please?

Thanks,
Allan

amoso.miso

This is somewhat hard to describe on how to reproduce the symptoms on the UI itself. On IE/Firefox, you will have to resize the browser window to a height that is less than the distance of the date picker field from the top of the page plus the datepicker popup height. And then, before focusing on the datepicker field, scroll down so that the datepicker field should fit in below the field. Then focus on the field. You should see the datepicker going to the top of the field. It helps if the datepicker field is at the top of the form.

An easy way to see the problem is to debug $('body').scrollTop(); in IE and Firefox it will always return 0 even when you have scrolled down. This affects the statement below that line:

if ( offset.top + inputHeight + calHeight - scrollTop > $(window).height() ) {

On the example page that you linked, noticed a behavior difference with the editor modal dialog. Our modal dialog scrolls with the page but that example page has a fixed modal dialog.

allan

Are you able to do a screen recording of the issue? I've not managed to get it to operate quite as you say yet.

What modal is it you are using for the display - jQuery UI?

Allan

amoso.miso

I sent you a message with a link to the screen recording. That screen recording is done in IE.

It looks like the editor is using using bootstrap's modal. I see bootstrap modal classes on the generated html.