I have a problem with RadAjaxLoadingPanel (Telerik version 2009.1.527.35), when the corresponding RadAjaxPanel is in a container (e.g. in a <div>) that is smaller than its content, so that the container has scrollbars. In this case, the RadAjaxLoadingPanel is partly displayed outside the boundaries of the container, depending on the scroll position.
Here's an example, where I have set the MinDisplayTime to 2 seconds, so that you can see what I mean.
| <%@ Page Language="C#" AutoEventWireup="true" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title></title> |
| </head> |
| <body style="padding:100px;"> |
| <form id="form1" runat="server"> |
| <div> |
| <rad:RadScriptManager ID="RadScriptManager" runat="server"/> |
| <rad:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" MinDisplayTime="2000" BackColor="Gray" Transparency="30" /> |
| <div style="height:200px; width:200px; overflow:auto; border:solid thin black;"> |
| <rad:RadAjaxPanel ID="RadAjaxPanel" runat="server" LoadingPanelID="RadAjaxLoadingPanel"> |
| <asp:Calendar ID="Calendar" runat="server" Width="300" Height="300"></asp:Calendar> |
| </rad:RadAjaxPanel> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
If you click on a date in the asp:Calendar, the LoadingPanel will be displayed, but it will overlap the bottom of the Calendar's <div> container. If you scroll to the bottom of the Calendar and click again, the LoadingPanel will overlap the container's top.
Is there a possibility to keep the AjaxLoadingPanel exactly over the AjaxPanel, even if the Panel's content is scrolled?
As I said, I'm still using Telerik version 2009.1.527.35. Can you reproduce this behaviour with the latest version, too?
Thanks a lot in advance!
[EDIT]I just noticed that I forgot the set the background color of the AjaxLoadingPanel in the example above. I have added that now.
3 Answers, 1 is accepted
The RadAjaxLoadingPanel will take the RadAjaxPanel to situate. Therefore i suggest you to set the AjaxPanel size as those of the <div>. For example:
<div style="height:200px; width:200px; overflow:auto; border:solid thin black;"> <telerik:RadAjaxPanel ID="RadAjaxPanel" Width="200px" Height="200px" runat="server" LoadingPanelID="RadAjaxLoadingPanel"> <asp:Calendar ID="Calendar" runat="server" Width="300" Height="300"></asp:Calendar> </telerik:RadAjaxPanel> </div>Sincerely yours,
Maria Ilieva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
thank you very much for your suggestion. The size of the LoadingPanel is OK now. But another problem still persists: when you scroll the asp:Calendar in the <div> vontainer to the bottom or to the right and click on a date again, then the position of the LoadingPanel has changed, depending on the scroll position. To make things clear, I have added a screenshot.
As I said, I'm still using Telerik version 2009.1.527.35. Can you reproduce this behaviour with the latest version, too?
Michael
In order to avoid this behavior you should wrap the <div> with the RadAjaxPanel like this:
<telerik:RadAjaxPanel ID="RadAjaxPanel" Width="200px" Height="200px" runat="server" LoadingPanelID="RadAjaxLoadingPanel"> <div style="height:200px; width:200px; overflow:auto; border:solid thin black;"> <asp:Calendar ID="Calendar" runat="server" Width="300" Height="300"></asp:Calendar> </div> </telerik:RadAjaxPanel>Sincerely yours,
Maria Ilieva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.