Hi Telerik,
I have the following:
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).
and everything works just as expected!
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!