RadAjaxLoadingPanel shows small 'x' above image

[Marcel]

Hello, I am using the RadAjaxLoadingPanel in a user control which is displayed in a web part in SharePoint. When the  'loading' image is displayed, a small 'x' is displayed above the image - see attached image. I have not set up skins in SharePoint yet. 1) How can I get rid of the small 'x'? 2) the image appears to be greyed out, but should be blue.

 

Here is the relevant markup:

<%@ Register Assembly="Telerik.Web.UI, Version=2015.3.1111.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="500" Transparency="30" >
    <asp:Label id="LoadingLabel" runat="server" ForeColor="Red">Loading... </asp:Label>
    <asp:Image ID="LoadingImage" runat="server" ImageUrl="/_layouts/images/XXX.SharePoint.ADS/loading.gif" />
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" Width="900px" Height="116px">
        <Items>
            <telerik:RadPanelItem Text="Asset Search" Expanded="true" >
                <ContentTemplate>
                    <table style="width:100%; text-align:center">

[Daniel]

Hello Marcel,

We do not have close button for RadAjaxLoadingPanel in our skins so I have no idea where it may come from. My assumption would be that there is a CSS that is applied to the element.
I recommend that you examine the loading panel in the developer console to see what CSS classes are decorating the spinning wheel.
As to the color of the image, it should be coming from the Default skin. Please try to remove the Skin="Default" from the declaration.

Regards,
Daniel
Telerik

[Marcel]

The little 'x' is actually the missing image. The ImageUrl was incorrect should have been:

ImageUrl="/_layouts/15/images/XXX.SharePoint.ADS/loading.gif"

where the '/15' was missing.

The image that I DID see is I guess a default image that is displayed - it shows up monochrome. Now I see both images. Is there a way to remove the default image?

[Daniel]

Hello Marcel,

Have you tried my suggestion to remove the default skin( Skin="Default ) from the declaration?

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="500" Transparency="30" >
    <asp:Label id="LoadingLabel" runat="server" ForeColor="Red">Loading... </asp:Label>
    <asp:Image ID="LoadingImage" runat="server" ImageUrl="/_layouts/images/XXX.SharePoint.ADS/loading.gif" />
</telerik:RadAjaxLoadingPanel>

This should help you get rid of the built-in image.

Regards,
Daniel
Telerik

[Marcel]

Hi Daniel,

Thanks for replying. I tried removing the default skin( Skin="Default ). That does remove the second (built-in) image, but the screen is then available and the transparency doesn't work. There are likely settings to correct this, but I ended up removing both my text and image from the loading panel, and used one of the skins (Windows7) - it displays correctly with the built-in image from the skin.  I was over complicating it.

Thank you!