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

[Tim]

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

[Dimo]

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.

[Tim]

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

[Dimo]

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.

[Tim]

Yes, of course.  Already taken care of.  Thanks for the IE 6 tip. 

Tim