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

AjaxLoadingPanel overlaps AjaxPanel when AjaxPanel has scrollbars

3 Answers 72 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
xws-mika
Top achievements
Rank 1
xws-mika asked on 31 May 2010, 02:18 PM

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

Sort by
0
Maria Ilieva
Telerik team
answered on 03 Jun 2010, 11:52 AM
Hi,

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.
0
xws-mika
Top achievements
Rank 1
answered on 04 Jun 2010, 07:44 PM
Hi Maria,

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
0
Accepted
Maria Ilieva
Telerik team
answered on 09 Jun 2010, 03:20 PM
Hi,

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.
Tags
Ajax
Asked by
xws-mika
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
xws-mika
Top achievements
Rank 1
Share this question
or