Thank you for your help. Although it was not quite what I needed help with, it did lead me to DropDownStyle property where I was able to use margin-left and margin-top to manually and absolutely position the 'calendar popup' where i wanted.

Thanks again,

Adrian

Hello again. I was able to use absolute positioning on the calendar drop down using javascript (jQuery to be specific). I used the AfterDropDown client-side event to expose the drop down to javascript and then manipulate from there.

The new problem is that after positioning the drop down, all controls become dead. I cannot click on any of the days nor the month & year drop downs. They don't show as disabled, however they act like it. If i comment out the line of javascript that manipulates the css, functionality is restored.

Any suggestions? I absolutely have to reposition the drop down.

Here is my javascript :

function cboStartDate_AfterDrop(oDateChooser, dropDownPanel, oEvent) {
             var posL = $("#startDateContainer").offset().left - $(".FormContentContainer").offset().left;
             var posT = $("#startDateContainer").offset().top - 102;
             $(dropDownPanel).css("position", "absolute").css("left", posL + "px").css("top", posT + "px");
         }

Thanks,

Andrew

Hi sorry, I just figured it out again. You have to move the hidden iframe to the same location. I don't understand why you can move one without the other and still have it be visible but whatever.

All I had to do was add an extra line of JS right after I move the dropDownPanel to move the <iframe> which looks like:

             var posL = $("#startDateContainer").offset().left - $(".FormContentContainer").offset().left;
             var posT = $("#startDateContainer").offset().top - 102;
             $(dropDownPanel).css("position", "absolute").css("left", posL + "px").css("top", posT + "px");
             $("iframe").css("position", "absolute").css("left", posL + "px").css("top", posT + "px");

Thanks again.

Hi,

There is the "container" member variable in WebDateChooser, which contains reference to container of drop-down calendar. In case of IE, there is also can be created dynamic internal "_ieBug" variable which holds object designed to be rendered under calendar to prevent possible <select> and other elements to be rendered on top of calendar. So, those variables can be used to change location of calendar. Below is example:

<script type="text/javascript">
function cboStartDate_AfterDrop(oDateChooser, dropDownPanel, oEvent)
{
 var div = oDateChooser.container;
 var iframe = oDateChooser._ieBug ? oDateChooser._ieBug.Element : null;
 var myLeft = '200px', myTop = '100px';
 div.style.left = myLeft;
 div.style.top = myTop;
 if(iframe)
 {
  iframe.style.left = myLeft;
  iframe.style.top = myTop;
 }
}
</script>
<igsch:WebDateChooser ID="WebDateChooser1" runat="server">
   <ClientSideEvents AfterDropDown="cboStartDate_AfterDrop" />
</igsch:WebDateChooser>