Center RadAjaxLoadingPanel

[Andre]

I had some problems to center the loading image for a loading panel both vertically and horizontally.

This worked for me. I basically just wrap the image inside a table that occupies 100% width and height and then I align the content of the cell to the middle.

Hope this can be of any help to others.

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Transparency="20" BackColor="#E0E0E0">
            <table style="width:100%;height:100%;">
                <tr style="height:100%"><td align="center" valign="middle" style="width:100%">
                    <asp:Image ID="Image1" runat="server" AlternateText="Loading..."
        BorderWidth="0px" ImageUrl="~/Images/Loading/Loading6.gif">
       </asp:Image>
                </td></tr>
            </table>
  </telerik:RadAjaxLoadingPanel>

[Iana Tsolova]

Hello Andre,

Thank you for sharing your solution in our forum. I have updated your Telerik points for the involvement.

Greetings,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[A]

Hi, Does the loading panel control reside inside the RADAJAXPanel control in the ASPX page? I have it after the RADAJAXPanel and it appears as it is supposed to however it is at the very top (centered horizontally) of the form.

[Sebastian]

Hi A,

The loading panel should reside outside of any RadAjaxPanel as it is not intended to be updated on ajax request. How to change the position of the loading image you can learn from the following topic in the online help.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Skypy]

Here is my version with a little update :
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="20">
    <table style="width:100%; height:100%; background-color: white;">
        <tr style="height:100%">
            <td align="center" valign="middle" style="width:100%">
                <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />
            </td>
        </tr>
    </table>
</telerik:RadAjaxLoadingPanel>

I prefer mine but it is a personal opinion, I hope it can help.

[Patrick Stovall]

Is it possible to center the loading panel based on the viewable area of the content area instead of the entire content area?  I have quite a few screens in which the content area height is quite large.  So with what is currently coded in this thread is used, the loading panel could not be seen.

[Konstantin Petkov]

Hello Patrick,

You can customize the Loading element position through some JavaScript. See the help article here for a possible implementation you can use as starting point.

Regards,
Konstantin Petkov
the Telerik team

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

[Josh Berkheimer]

Your suggestion for centering this in the viewable area does not work in Safari nor Chrome browsers.  Is there a fix for the bugs with these specific browsers?

[Pavel]

Hello Josh,

I was not able to reproduce the problem neither on Safari nor on Chrome. Please find attached the page I used for testing and let us know how it behaves on your end.

All the best,
Pavel
the Telerik team

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

[jfkrueger]

Well, the Script works pretty well to center the RadAjaxLoadingPanel but the behavior is still different. On some pages I can simply wrap my content in a RadAjaxPanel and set the LoadingPanelID like this:

<telerik:RadAjaxPanel ID="rapMain" runat="server" LoadingPanelID="rlpMain">

     <div class="divColSmaller">
          *First Name-MI-*Last Name:
     </div>

</telerik:RadAjaxPanel>

 
And then declare a simple RadAjaxLoadingPanel like this:

<telerik:RadAjaxLoadingPanel ID="rlpMain" runat="server" HorizontalAlign="Center" IsSticky="true">
    <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" style="border:0;" />
</telerik:RadAjaxLoadingPanel>

And it works very well, meaning the content of the page is completely replaced by the RadAjaxLoadingPanel and it is centered, and then when the processing is complete the panel goes away and the page content is visible again.

With all of these solutions, I am able to get the LoadingPanel centered but it is now no longer replacing all of the content on the page, it is just pushing it all down so if you are working on the bottom of a page you never see the loading panel.

How do I get the loading panel to actually replace all of the content on the page like it does when I use the above code?

[Pavel]

Hi Joe,

I have updated the sample to illustrate that the script is working as expected with a LoadingPanel defined similar to yours. Also as explained in this help article when the IsSticky property is set to true, you need to set absolute positioning for the LoadingPanel control. This will prevent the pushing of the other controls when the LoadingPanel appears.

I hope this helps

Regards,
Pavel
the Telerik team

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

[Paweł]

There is much simpler way to center loading images. Using tables is not nice also.

Just put empty RadAjaxLoadingPanel with CssClass like this:

<telerik:RadAjaxLoadingPanel ID="ajaxLoading" runat="server" Transparency="30" BackColor="#ffffff" CssClass="ajax_loader">

</telerik:RadAjaxLoadingPanel>

And because loading panel is just regular div, so set css for it:

div.ajax_loader
{
    background: url(Images/ajax-loader.gif) no-repeat center center;
}

Very simple and works rof me in FF nad IE.

[Dimo]

Hello Paweł,

That's right. We have even a code library example for that:

How to Center Image In a RadAjaxLoadingPanel

Kind regards,
Dimo
the Telerik team

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

[Carl]

I have a very long grid on a single page so that a user can select all records at one time.

I have tried the css solutoin above, but it puts the image in the middle of the grid which is typically off the page (either above or below)

Is there a way to place a loading image in the center of the current viewable screen? 

Thanks.

[Pavel]

Hello Carl,

I think the javascript method to center the LoadingPanel displayed previously in this thread should work in your case. Try it out and let us know if you have any problems.

Sincerely yours,
Pavel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Carl]

Thank you Pavel.  I will give this a try and post my results.

Thanks.

[Zura Chikhladze]

Andre, excellent solution to the problem. thank you.