SharePoint Datepicker not displaying near DateTime Field

Question

In one of my site collection all date-picker values are getting displayed at the very end of the page unlike the standard near the date-time field. I inspected the code for the iframe of the date-picker and it seems to incorrectly compute the top, left attributes. I recreated the list in a sub site and there the date-picker is getting displayed near the field.

How do i correct this behavior? One more difference i observed is that on scrolling the date-picker moved along with the field in my sub-site. but in the parent site the date picker is stuck at the bottom and i can only see < April 3, 2017 >

Answer 1

Found the solution in this answer. When I changed the position attribute of the parent table to relative it worked as expected. But I still don't get why this has to be done as the same list exported to my sub-site worked without adding any extra scripts. :(

Here is the jQuery script I used to solve this issue

$('td.ms-dtinput').closest('table').css({position: 'relative'});

If anyone can explain why I have to do this even though the form works correctly in my sub-site, I'd be grateful

Answer 2

can u try this code

function OnIframeLoadFinish() {
    ULSvmd:
    ;
    var picker;

    if (typeof this.Picker != 'undefined')
        picker = this.Picker;
    if (picker != null && typeof picker.readyState != 'undefined' && picker.readyState != null && picker.readyState == "complete") {
        document.body.scrollLeft = g_scrollLeft;
        document.body.scrollTop = g_scrollTop;
        g_scrollTop = document.getElementById('s4-workspace').scrollTop;
        picker.style.display = "block";
        if (typeof document.frames != 'undefined' && Boolean(document.frames)) {
            var frame = document.frames[picker.id];

            if (frame != null && typeof frame.focus == 'function')
                frame.focus();
        }
        else {
            picker.focus();
        }
    }
    setTimeout(function () {
        document.getElementById('s4-workspace').scrollTop = g_scrollTop;
    }, 1);
}