Loading Panel Behind Tabs

3 posts, 1 answers
  1. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 28 Dec 2011 Link to this post

    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

  2. Answer
    Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 28 Dec 2011 Link to this post

    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!
  3. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 07 Jan 2012 Link to this post

    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
Back to Top