Calendar control does not move with scrollbar

4 posts, 0 answers
  1. Manoj
    Manoj avatar
    9 posts
    Member since:
    Feb 2008

    Posted 28 Aug 2008 Link to this post

    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

  2. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 28 Aug 2008 Link to this post

    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.
  3. Manoj
    Manoj avatar
    9 posts
    Member since:
    Feb 2008

    Posted 28 Aug 2008 Link to this post

    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
  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 28 Aug 2008 Link to this post

    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.
Back to Top