This is a migrated thread and some comments may be shown as answers.

Calendar control does not move with scrollbar

3 Answers 200 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Manoj
Top achievements
Rank 1
Manoj asked on 28 Aug 2008, 06:34 AM
Hi,

I am using a Calendar control on my page. when i scroll the page all controls move with scroll except Calendar control. Calendar control remains static and appears hanging in air.  However i want it to stick with date input and move with scollbar when i scroll the page.
I am sending some code to describe the problem.

<

form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<div style="height:300px; width:400px;overflow:scroll;">
<div style=" height:500px; width:350px">
<table ><tr><td>
<asp:TextBox ID="TextBox1" runat="server" Width="197px"></asp:TextBox>
</td></tr>
<tr><td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td></tr>
<tr><td>

<rad:RadDatePicker ID="datePikFmCrRangeStart" runat="server" EnableTyping="False" Skin="Default2006" Calendar-EnableMonthYearFastNavigation="false">
<DateInput ReadOnly="True" Skin="Outlook" CssClass="input" runat="server" ID="dateInput2">
</DateInput></rad:RadDatePicker>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
<
/td>
</tr>
</table>
</div>
</div>
</form>

You can paste this code in a page and can see how the calendar control behaves.
I tried to set the Style="position:relative;" to this control but did not work.
please suggest me some solution.

Regards,
Manoj Dwivedi

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 28 Aug 2008, 08:57 AM
Hello Manoj,

Please the following this code:
<script type="text/javascript">  
function HideOnScroll()  
{  
    var datepicker = $find("<%= RadDatePicker1.ClientID %>"); 
    if (datepicker.IsPopupVisible())  
    {  
        datepicker.TogglePopup();  
    }  
}  
</script>  

<div style="height:300px; overflow:scroll;" onscroll="HideOnScroll()">  
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" style="display: block; margin-top: 500px;">  
    </telerik:RadDatePicker>  
</div>  

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Manoj
Top achievements
Rank 1
answered on 28 Aug 2008, 11:09 AM
This workarround seems okey but is less suitable to my requirements. As i do not want to hide the calendar on scroll, so please suggest if there can be any other alternative.

Regards,
Manoj  Dwivedi
0
Sebastian
Telerik team
answered on 28 Aug 2008, 11:27 AM
Hi Manoj,

Unfortunately there is no other alternative than to hide explicitly the dropdown holding the calendar instance when scrolling vertically. I hope that the solution proposed by my colleague Daniel is feasible workaround for you.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Calendar
Asked by
Manoj
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Manoj
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or