z-index of custom dialog in editor

5 posts, 0 answers
  1. Amy
    Amy avatar
    113 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...
    editor.showExternalDialog
    (
      '/TestDevelopment/Controls/EquationEditorStyle.aspx',
      argument,
      620,
      420,
      myCallbackFunction,
      null,
      'Equation Editor',
      true,
      Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
      false,
      true
    );

    Any suggestions would be greatly appreciated!  Thanks!!
  2. Rumen
    Admin
    Rumen avatar
    12949 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">
        .RadWindow.RadWindow_Default.rwNormalWindow.rwTransparentWindow
        {
            z-index: 20000 !important;
        }
    </style>


    Best wishes,
    Rumen
    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. Amy
    Amy avatar
    113 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">
    <CssFiles>
      <telerik:EditorCssFile Value="ExternalCssFile1.css" />
    </CssFiles>
    <Content>
    </Content>
    </telerik:RadEditor>

    Note, I did change the snippet of code you provided to...
    .radwindow.radwindow_tds.normalwindow.transparentwindow
    {
     z-index: 20000  !important;
    }
    </style>
    as there is a skin defined for the Editor called 'tds'.

    Thank you for your help looking into this!
  4. Amy
    Amy avatar
    113 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...

    ToolbarMode="ShowOnFocus"

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

    Posted 11 Feb 2016 in reply to Rumen Link to this post

    Lot of thanks for the css class!

Back to Top