z-index of custom dialog in editor

5 posts, 0 answers
  1. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 18 Aug 2010 Link to this post

    How can I set the z-index for a custom dialog in the Editor? 

    We have a web page with a RadEditor placed inside a RadPane.  A custom dialog has been added to the Editor which loads a java applet.  The problem is when clicking the button to launch the applet, it is appearing behind the RadMenu control on the web page.

    I would like to set the z-index of the custom dialog to be higher than the RadMenu.  I tried the suggestion in the following link, but am not having any success... http://www.telerik.com/community/forums/aspnet-ajax/editor/z-index-of-image-manager.aspx

    Here is the call for showing the custom dialog...
      'Equation Editor',
      Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

    Any suggestions would be greatly appreciated!  Thanks!!
  2. Rumen
    Rumen avatar
    12782 posts

    Posted 19 Aug 2010 Link to this post

    Hello Amy,

    I was able to fix the z-index problem using the following CSS class:

    <style type="text/css">
            z-index: 20000 !important;

    Best wishes,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
  4. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 19 Aug 2010 Link to this post

    Hi Rumen,

    I added the code snippet you provided to the aspx page containing the Editor, but am still experiencing the same issue. Here's the code where the editor is defined...
    <telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="~/Content/NoTools.xml" EditModes="Preview" Skin="tds" EnableEmbeddedSkins="false" Height="780" Width="670" OnClientLoad="OnClientLoad" ContentAreaCssFile="~/Content/jam2/EditorContent.css">
      <telerik:EditorCssFile Value="ExternalCssFile1.css" />

    Note, I did change the snippet of code you provided to...
     z-index: 20000  !important;
    as there is a skin defined for the Editor called 'tds'.

    Thank you for your help looking into this!
  5. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 19 Aug 2010 Link to this post

    The issue has been resolved.  I added the following in the RadEditor declaration and now the custom dialog appears on top of everything else...


    Thank you again though for your time and help!!
  6. Alejandro
    Alejandro avatar
    2 posts
    Member since:
    Feb 2016

    Posted 11 Feb in reply to Rumen Link to this post

    Lot of thanks for the css class!

Back to Top
DevCraft R3 2016 release webinar banner