The following code library example demonstrates how to make a RadAjaxLoadingPanel expand to occupy the full page width and height.
Some important notes:
- The RadAjaxLoadingPanel has to be Sticky (IsSticky="true") and absolutely positioned with width and height set to 100%.
- The <body> tag needs its margin reset to zero, otherwise the loading panel will not start from the browser viewport edge.
- The html, body and form tags need a min-height:100% style, in cas? the page content is less than the browser viewport height.
- If the page content is more than the browser viewport height, you need to set the loading panel's height client-side with Javascript.
- 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.
- 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.
You can scroll randomly up or down before making the AJAX request to see that the modal background covers the whole page and the background image is always centered in the current visible portion of the loading panel. This is achieved by the RequestStart() javascript function.