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

Loading Panel with multiple divs - works on Firefox, not on IE

4 Answers 122 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 15 Sep 2008, 02:03 PM
Anyone have any idea why a RadAjaxLoadingPanel with multiple divs and an image would work properly on Firefox, but not (always) on IE?  In particular, it fails on IE when a RadTabStrip is updating RadMultiView panels.

The symptom: The top half of the panel is visible, while the bottom half gets cut off.  The IE Developer Toolbar highlight the proper area using the DOM inspector, but IE just doesn't draw the entire panel.

Here's the code:

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Transparency="10" Height="80px" Width="80px"
  <div class="LoadingPanel"
    <div class="center"
      <asp:Label ID="LoadingPanelLoadingLabel" runat="server" Text="Loading..." /> 
    </div> 
    <div class="center"
      <asp:Image ID="LoadingImage" runat="server" AlternateText="Loading..." ImageUrl="~/images/rotating.gif"/> 
    </div> 
  </div> 
</telerik:RadAjaxLoadingPanel> 
 

And here is a stylesheet snippet for the LoadingPanel:

.LoadingPanel 
  background: transparent url(../images/loadingpanelbackground.gif) no-repeat scroll 0px 0px; 
  height: 80px; 
  width: 80px; 
  padding-left: 12px; 
  padding-top: 15px; 
  margin-left:auto; 
  margin-right:auto; 
 


Thanks,
Tim

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 19 Sep 2008, 01:48 PM
Hi Tim,

When in non-sticky mode (IsSticky="false"), the loading panel assumes the dimensions of the control that it updates. I suppose that you are updating a control, which is less than 80px high and that is why the loading panel is cut off.

You can try something like this:

<telerik:RadAjaxLoadingPanel  Height="80px"  Width="80px"  CssClass="loadingPanel">


CSS

.loadingPanel
{
      min-height: 80px;
}



Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tim
Top achievements
Rank 1
answered on 22 Sep 2008, 12:57 PM
Adding the extra cssclass and min-height fixes the problem - thanks.  However, I do not believe  it is properly assuming the size of the interior contents, which is fixed (div) at 80x80.  I'm not a CSS expert though and perhaps it is working as specified.  Surely it is not behaving as I expect.

Tim

0
Dimo
Telerik team
answered on 22 Sep 2008, 03:02 PM
Hello Tim,

Actually it will be better and more bug-proof if the CssClass of the RadAjaxLoadingPanel is different from the CSS class of the <div> inside it. I have provided an example in which the CssClass of the RadAjaxLoadingPanel differs only by its first letter casing from the other CSS class.

Anyway, the min-height solution is good enough for you. One more thing, though - if you have to support IE6 too, you need to add the following:


<telerik:RadAjaxLoadingPanel  Height="80px"  Width="80px"  CssClass="MyLoadingPanel">


CSS

.MyLoadingPanel
{
      min-height: 80px;
}

* html  .
MyLoadingPanel
{
       height: 80px;
}



As for "I do not believe  it is properly assuming the size of the interior contents, which is fixed (div) at 80x80." - well, indeed it isn't - as I said, the loading panel assumes the size of the control which is updated, not its content (unless you set IsSticky="true"). That is why you need to take care of this with the above CSS rules.


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tim
Top achievements
Rank 1
answered on 22 Sep 2008, 03:06 PM
Yes, of course.  Already taken care of.  Thanks for the IE 6 tip. 

Tim

Tags
Ajax
Asked by
Tim
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tim
Top achievements
Rank 1
Share this question
or