Sticky LoadingPanel won't show over RadButton.

[Sean]

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"/>

.editButton
{
    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?

Thanks,

Sean

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).style.top = $('#TopBar').height() + "px";
    $get(loadingPanelForSplitterFixingID).style.left = "0px";
}

   
and everything works just as expected!