Sticky LoadingPanel won't show over RadButton.

1 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 26 Oct 2011 Link to this post

    Hi Telerik,

    I have the following:

    <telerik:RadAjaxLoadingPanel ID="LoadingPanelForSplitterFixing" Runat="Server" Skin="Web20" MinDisplayTime="500" Style="z-index: 90000 !important" IsSticky="True"/>

    <telerik:RadButton ID="StartEditButton" Runat="Server" Skin="Web20" ButtonType="StandardButton" Text="Configure Dashboard" CssClass="editButton" OnClientClicked="EnableEditMode" AutoPostBack="False"/>

        z-index: 20;
        position: absolute;
        margin-top: 2px;
        right: 130px;

    I need to have the z-index set for the RadButton because it is clashing with some empty space generated by a RadTabStrip. This makes half of the button non-clickable because a div is overlapping it. As such, I set the z-index of the RadButton. This had the desired effect of bringing it above the RadTabStrip. But, I cannot get the RadLoadingPanel to render above the RadButton.

    I believe that using cssClass is applying the z-index to the div-level element which is taking higher precedence than setting the style for the RadLoadingPanel...but I'm honestly not quite sure. How can I fix this rendering issue?



    EDIT: Just to be crystal... if I set style="z-index 20" in the RadButton mark-up I see the same effect.

    EDIT2: I figured it out. What I was doing initially was just showing the loading panel over everything. E.G. All I did was set it to sticky. After a bit of work adding some other desired features, I solved this bug by accident! I believe the issue is that I was not setting position: absolute (because I did not have the dimensions set for the loading panel).

    if (postBackElement.indexOf("BASEUNDERPAGEVIEW") != -1) {
        loadingPanel = $find(loadingPanelForSplitterFixingID);
        loadingPanelFixSplitterVisible = true;
        $get(loadingPanelForSplitterFixingID).style.width = $(window).width() + "px";
        $get(loadingPanelForSplitterFixingID).style.height = $(window).height() - $('#TopBar').height() + "px";
        $get(loadingPanelForSplitterFixingID).style.position = "absolute";
        $get(loadingPanelForSplitterFixingID) = $('#TopBar').height() + "px";
        $get(loadingPanelForSplitterFixingID).style.left = "0px";
    and everything works just as expected!

Back to Top