Z-Index issue again (RadMenu vs RadEditor)

[Alfred Ortega]

Ok it's not really the editor but rather the "managers".  When I open the Documents/image/flash managers they appear behind the RadMenu.  I have adjusted the z-index on the RadEditor (style="z-index:9001;") but the result is the same.  Shouldn't pop-up editors have their z-index set higher than all other controls by default?

 

Al

[Rumen]

Hello Alfred,

Could you please set the following class on the page with the RadEditor and RadMenu:

    <style type="text/css">
    .radwindow { z-index: 8000 !important; }
    </style>

This should do the trick.

The other way is to set the <telerik:RadMenu style="z-index:3000" ID="rm1" runat="server"> ...

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Peter]

I'm having a similar problem RadDock vs RadEditor. I used the style fix to place the windows in front of the dock panels but when the editor is in full screen a dock is on top of it.

Normal
Full Screen

I tried with the same css for .radeditor but that didn't help.

<style type="text/css">
    .radwindow, .radeditor { z-index: 8000 !important; }
</style>

[Rumen]

Hi Peter,

I was able to fix the problem by setting the RadDock's z-index to -1 after switching to FullScreen mode of RadEditor. When toggling back to normal mode I restored the original z-index of RadDock. Here is my code:

<script type="text/javascript">

var originalDockZIndex = null;

function OnClientCommandExecuting(editor, args)

{

var dock = $find("<%=RadDock1.ClientID%>");

if (args.get_commandName() == "ToggleScreenMode")

{

if (editor.isFullScreen())

{

//set the original dock z-index after returning to normal mode

dock.get_element().style.zIndex = originalDockZIndex;

}

else

{

originalDockZIndex = dock.get_element().style.zIndex;

//set the z-index of RadDock to -1 in FullScreenMode

dock.get_element().style.zIndex = "-1";

}

}

}

</script>

<telerik:RadEditor id="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting"></telerik:RadEditor>

<telerik:raddock runat="server" id="RadDock1" text="Static Dock" width="400" style="z-index:60">

<titlebartemplate>

<asp:updatepanel runat="server" id="UpdatePanel1">

<contenttemplate>

<asp:linkbutton id="LinkButton2" runat="server"  style="text-decoration: none;

color: Gray;" text="Initial text">

</asp:linkbutton>

<asp:textbox runat="server" id="TextBox1" width="200px" visible="false"></asp:textbox>

<asp:linkbutton runat="server" id="LinkButton1" ></asp:linkbutton>

</contenttemplate>

</asp:updatepanel>

</titlebartemplate>

</telerik:raddock>

For your convenience I have attached my test aspx page.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[AndyRutter]

Hi,
How do we do this when the dock is in a master page?

[Marin Bratanov]

Hello Brian,

You can create a function in the master page's markup that will return the desired dock:

function getDesiredRadDock(){
  return $find("<%=DesiredRadDock.ClientID %>");
}

so you can access the control's ClientID from the code-behind.

Then use that function to reference it:

function OnClientCommandExecuting(editor, args)
{
    var dock = getDesiredRadDock();

   . . . .
}

You may also find interesting this idea on creating a list with the desired control data: http://blogs.telerik.com/jefffritz/posts/13-01-21/simplify-javascript-control-references-in-asp.net-webforms.




Regards,
Marin Bratanov
Telerik