How to Make a RadAjaxLoadingPanel Span Over the Whole Page

Thread is closed for posting
2 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 01 Dec 2008 Link to this post

    Requirements

    RadControls version RadControls for ASP.NET AJAX 2008.1.415+
    RadAjax 1.8+
    .NET version

    2.0, 3.5
    Visual Studio version

    2005, 2008
    programming language

    any
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    The following code library example demonstrates how to make a RadAjaxLoadingPanel expand to occupy the full page width and height.

    Here are some important notes:

    1. The RadAjaxLoadingPanel has to be Sticky (IsSticky="true") and absolutely positioned with width and height set to 100%.
    2. The <body> tag needs its margin reset to zero, otherwise the loading panel will not start from the browser viewport edge.
    3. The html, body and form tags need a min-height:100% style, in casе the page content is less than the browser viewport height.
    4. If the page content is more than the browser viewport height, you need to set the loading panel's height client-side with Javascript.
    5. The RadAjaxLoadingPanel must be placed inside the <form> element. Otherwise it must not have relatively positioned parent elements, because they will prevent it from expanding properly.
    6. If the RadAjaxLoadingPanel does not cover some relatively positioned elements on the page, then move the loading panel after those elements in the page markup and/or set some large enough z-index style to the RadAjaxLoadingPanel's CSS class.

    In addition, please review the various comments in the attached ASPX page.

  2. 2D95F235-B3CE-414A-BD6E-7B2E8B7CF5CD
    2D95F235-B3CE-414A-BD6E-7B2E8B7CF5CD avatar
    8486 posts
    Member since:
    Apr 2023

    Posted 02 Jan 2009 Link to this post

    Here is a modified version of the above sample project, which also demonstrates how to place a background image at the center of the ajax loading panel's currently visible portion.

    Also, a problem with calculating the page scroll offset in Safari is resolved.

    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.