Loading Panel Behind Tabs

[David]

Hi,

I am having a problem which is a mere nuisance at worst. Check out the following screen shot - http://i167.photobucket.com/albums/u122/sixesallround/loadingImageBehind.png

The loading panel is getting lost behind the tabs. It makes it look a bit less professional. It’s not perfect!
The loading panel is implemented as follows:

<div id="loadingDiv" class="screenCenter" style="display: none;">
    <telerik:RadAjaxLoadingPanel ID="DarRadAjaxLoadingPanel" Skin="Black" CssClass="lPanel"
                                 runat="server" Transparency="20"
                                 IsSticky="true" ZIndex="998">
    </telerik:RadAjaxLoadingPanel>
</div>

The relevant CSS for that stuff is:

.screenCenter
{
    width: 150px;
    height: 70px;
    position: absolute;
    top: 30%;
    left: 45%;
}

.lPanel
{
    margin: 0px;
    top: 0px;
    left: 0px;
    height: 62px;
    width: 142px;
    background-color: #9eda29;
    border: 4px solid #3d7f59;
}

I am using the client events of the RadAjaxManager to display and hide it, via the following Javascript:

function ShowLoadingPanel() {
    var loadPanelWrapper = $('#loadingDiv');
    loadPanelWrapper.css({ display: 'block' });
}

function HideLoadingPanel() {
    var loadPanelWrapper = $('#loadingDiv');
        loadPanelWrapper.css({ display: 'none' });
    }

 

Any ideas how I can ensure that it does not sink behind the tabs? Any idea as to why it is doing that?

 

Cheers

[Richard]

David:

Did you see this cautionary note on the RadAjaxLoadingPanel documentation page?
 

In order to have a RadAjaxLoadingPanel, you need to drag it to your web form from the toolbox just like any control. Then you can set a control to use a RadAjaxLoadingPanel using the design-time. The IsSticky property of the RadAjaxLoadingPanel defines where the panel will appear. By default, when IsSticky is false, the RadAjaxLoadingPanel will appear over the updated control. If you set IsSticky to true, the panel will appear where you have set it in the WebForm.

Caution

In case you have many controls added to the AjaxSettings and want to use IsSticky="true", then you need to set absolute positioning for the RadAjaxLoadingPanel control i.e: <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" IsSticky="true" runat="server" style="position:absolute;"> <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="Loading.gif" /> </telerik:RadAjaxLoadingPanel>

You should be able to use the style attribute to position your panel in relation to the toolbar.

Also, you may have set your Z-Index too low. The default Z-Index for the loadingpanel is 90000 so it’s always on top. You can also try to set your panel's Z-Index really high and test again. Then, you can lower it slowly until the panel is in the proper relative Z location.

Cheers!

[David]

Thanks Jumpstart. I believe I solve the problem using your suggestion to increase the z-index of the div that was enclosing the loading panel.

Cheers