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

Center RadAjaxLoadingPanel

16 Answers 1553 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Andre
Top achievements
Rank 1
Andre asked on 04 Feb 2008, 07:23 PM
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>

16 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 05 Feb 2008, 01:45 PM
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
0
A
Top achievements
Rank 1
answered on 31 Mar 2008, 08:14 PM
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.
0
Sebastian
Telerik team
answered on 01 Apr 2008, 07:16 AM
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
0
Skypy
Top achievements
Rank 1
answered on 02 Apr 2008, 02:35 PM
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.
0
Patrick Stovall
Top achievements
Rank 1
answered on 23 Jul 2008, 04:57 PM

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.
0
Konstantin Petkov
Telerik team
answered on 24 Jul 2008, 05:36 AM
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.
0
Josh Berkheimer
Top achievements
Rank 1
answered on 01 Oct 2008, 10:20 PM
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?
0
Pavel
Telerik team
answered on 03 Oct 2008, 08:15 AM
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.
0
jfkrueger
Top achievements
Rank 1
answered on 17 Nov 2008, 08:23 PM
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?
0
Pavel
Telerik team
answered on 20 Nov 2008, 09:40 AM
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.
0
Paweł
Top achievements
Rank 2
answered on 26 Jan 2009, 09:16 PM
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 
    backgroundurl(Images/ajax-loader.gif) no-repeat center center


Very simple and works rof me in FF nad IE.
0
Dimo
Telerik team
answered on 27 Jan 2009, 08:56 AM
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.
0
Carl
Top achievements
Rank 1
answered on 25 Jun 2009, 08:12 PM
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.
0
Pavel
Telerik team
answered on 01 Jul 2009, 08:39 AM
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.
0
Carl
Top achievements
Rank 1
answered on 01 Jul 2009, 08:47 PM
Thank you Pavel.  I will give this a try and post my results.

Thanks.
0
Zura Chikhladze
Top achievements
Rank 1
answered on 21 Feb 2011, 01:45 PM
Andre, excellent solution to the problem. thank you.
Tags
Ajax
Asked by
Andre
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
A
Top achievements
Rank 1
Sebastian
Telerik team
Skypy
Top achievements
Rank 1
Patrick Stovall
Top achievements
Rank 1
Konstantin Petkov
Telerik team
Josh Berkheimer
Top achievements
Rank 1
Pavel
Telerik team
jfkrueger
Top achievements
Rank 1
Paweł
Top achievements
Rank 2
Dimo
Telerik team
Carl
Top achievements
Rank 1
Zura Chikhladze
Top achievements
Rank 1
Share this question
or