RadScheduler DatePicker in IE

[Kevin]

When I used a RadScheduler, Internet Explorer has issues displaying the DatePicker control.  It appears, but under the schedule itself, mostly hidden.

I've done some research on some of the CSS bugs in IE, but everything says IE 8 fixed the bugs.  I am using IE8.

Has anyone see this and have a solution?

[Kevin]

Sorry, I am using IE9

[Princy]

Hello,

I am using the version 2011, 3, 1305, 35 and it worked as expected on my end. So one suggestion is you can upgrade your telerik control version.

Thanks,
Princy.

[Kevin]

I upgraded to 2011.3.1305.40

The problem still exists exactly as pictured.  Internet Explorer 9.  It displays fine in FireFox and Chrome.

[Kevin]

Okay, let me detail the issue I have been having overall with Internet Explorer 9, and not just with RadControls, though it has happened now with RadPopups and RadScheduler.

IE9 seems to have issues displaying elements which have bounds outside their containing element.  In the above example, the date picker was displaying, but because a majority of it would leave its containing element, it did not display properly.  No amount of z-leveling or positioning would change it.

So I came up with a solution that is neither clever nor elegant.  Posted below:

function onLoad() {
    // Move the offending div to another div.
    var wrapper = document.getElementsByClassName("rsDatePickerWrapper")[0];
    var activator = document.getElementsByClassName("rsDatePickerActivator")[0];

    wrapper.parentNode.removeChild(wrapper);

    var newParent = document.getElementById("ctl00_MainContent_RadScheduler1");
    newParent.insertBefore(wrapper, newParent.childNodes[0]);

    newParent.style.position = "relative";
    wrapper.style.position = "absolute";
    wrapper.style.visibility = "hidden";
    wrapper.style.zIndex = "9000";
    wrapper.style.top = "15px";
    wrapper.style.left = "110px";
    activator.setAttribute("onClick", "visibleWrapper()");
}
function visibleWrapper() {
    var wrapper = document.getElementsByClassName("rsDatePickerWrapper")[0];
    wrapper.style.visibility = "visible";
}

It displays properly in all browsers now, but it is a hack.  I'd ask if anyone could think of a more elegant solution, but no one else seems to have this issue!  I do know it isn't just me though, because I am resolving this issue for a client, whose entire company sees this flaw in IE9.

[Guillermo]

This works for me:

$('.rsDatePickerActivator').click(function() {
    if($('.rsDatePickerAnimationWrapper').is(":visible"))
        $('.rsContentWrapper').height('auto');
    else
        if($('.rsContentWrapper').height() < 260)
            $('.rsContentWrapper').height(260);
});