loading.gif not displayed in RadAjaxLoadingPanel with Internet Explorer

[Eric]

Hi, I have a RadAjaxLoadingPanel which has a gif image loaded by GetWebResourceUrl function. When I make an ajax postback the loading panel is displayed (a gray panel covering all the controls in the page) but the gif inside the loading panel is not displayed. This only happens with Internet Explorer 7-8. It works fine with Firefox, Safari and Chrome.

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" BackColor="#E0E0E0"
        Transparency="20">
        <table style="width: 100%; height: 100%;">
            <tr style="height: 100%;">
                <td style="width: 100%; text-align: center; vertical-align: middle;">
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                        style="border-right: 0px; border-left: 0px; border-top: 0px; border-bottom: 0px;" />
                </td>
            </tr>
        </table>
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server" LoadingPanelID="RadAjaxLoadingPanel">
     <div style="width:500px; height:500px">
     </div>
    </telerik:RadAjaxPanel>

I have all the necessary web.config entries

<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />

PS: When I check the telerik web pages (such as http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx) running with RadAjaxLoadingPanel my internet explorer browser successfully shows the gif images. So I think this is not related to internet explorer configuration.

Thank you...

[Sebastian]

Hello Eric,

When you use template image for your loading panel, you need to set the Skin property of the RadAjaxLoadingPanel to "" to disable its built-in loading indicator. See the configuration on this demo for details.

Best regards,
Sebastian
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.

[Eric]

The problem is with the Transparency="20" statement. When I remove it, RadAjaxLoadingPanel works as expected in internet explorer. I think there is a problem with internet explorer displaying an overlapping transparent element and gif image.

[Dimo]

Hi Eric,

Internet Explorer does not support animated images placed inside an element with a filter style applied (the transparency in IE is produced with such a style).

You can workaround this by creating a custom skin for RadAjaxLoadingPanel and use the desired loading image there.

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-create-and-use-custom-skins-for-radajaxloadingpanel.aspx

Regards,
Dimo
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.

[Therrel]

Dimo,

I was glad to see your answer, but I even removed the animated image from the loading panel, then replaced it with text (nothing else). But even the text-only content still does not display in Internet Explorer. The issue does seem limited to IE though.

Is a custom skin truly the only solution? Any other suggestions?

Thanks
Danny

[Galin]

Hi Therrel,

I am afraid making a custom skin is the only crossbrowser solution for different transparency levels. Also you can simply override the styles of an existing skin, you need only these three CSS rules:

.RadAjax_[Skin_Name] .raDiv /*use this rule if you need to change the loading image */
{
    background-image:url('Ajax/loading.gif');
}

.RadAjax_[Skin_Name] .raColor /*use this rule if you need to change the bg color*/
{
    background-color:#d8dee3;
}

.RadAjax_[Skin_Name] .raTransp /*finally use this rule for changing transparency level*/
{
    opacity:0.2;
    -moz-opacity:0.2; /*For old Mozilla Browsers*/
    filter:alpha(opacity=20); /*For IE*/
}

Please refer to this blog post.

I hope this helps.

Kind regards,
Galin
the Telerik team

[Tema]

Hi, most likely it's about gif, try to download loading gif transparent from this site, I often use gifs from there, like everything is normal http://icons8.com/preloaders