z-index of Image Manager

9 posts, 0 answers
  1. Jeff
    Jeff avatar
    100 posts
    Member since:
    Apr 2008

    Posted 07 Aug 2008 Link to this post

    We have a RadEditor inside a custom control that is being placed on an ASP:Panel that is being controlled by a ModalPopupExtender.

    The idea is that when the user clicks on "Edit", the ModalPopupExtender displays the RadEditor. So far, this works fine.

    The problem is that when the user clicks on the "Image Manager" button in the editor, the Image Manager form appears behind the RadEditor, where it cannot be accessed.  It seems as if it is being drawn with a lower z-index that the RadEditor itself.

    Three months ago, when we were coding this project, we did not see this behavior.  Now, as we're trying to install it, it's shown up.

    I need a fast fix, even if it's an ugly one.  Is there some way I can set the z-index for the Image Manager and it's siblings?

  2. Rumen
    Admin
    Rumen avatar
    12847 posts

    Posted 08 Aug 2008 Link to this post

    Hello Jeff,

    Please, set the following class in the page with the editor:

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

    This should fix the problem.

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    100 posts
    Member since:
    Apr 2008

    Posted 08 Aug 2008 Link to this post

    A z-index of 13000 put the image manager in front of the half-gray backdrop, but still behind the editor, so I had to kick it up a bit more. But with that, it's working.

    Thanks for the quick response.
  5. Scott
    Scott avatar
    45 posts
    Member since:
    Apr 2008

    Posted 13 Oct 2008 Link to this post


    This works in IE, but in FireFox.  I even bumped it up to 90000. 

     

    .radwindow.radwindow_Default.normalwindow.transparentwindow
    {z-index:90000 !important;}

    The LinkManager dialog window is below the RadMenu. Please advise on how to solve this in FireFox.

     

  6. Rumen
    Admin
    Rumen avatar
    12847 posts

    Posted 13 Oct 2008 Link to this post

    Hello Scott,

    I made a test with the following class

    <style>
    .radwindow.radwindow_Default.normalwindow.transparentwindow
    {
        z-index: 9002 !important;
    }
    </style>

    and it worked as expected on my side even in Firefox. You can see my test in the attached video. Please, note that this class applies to Default skin only.

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Ryan
    Ryan avatar
    8 posts
    Member since:
    Mar 2008

    Posted 15 Oct 2008 Link to this post

    I am having a similar problem with the editor tool bar.  I have placed the editor in within a panel that is displayed when I call the corresponding AJAX modal popup extender.  The editor and tool bar display correctly, however any of the format options the are contained within a drop down (i.e. font name, font size, color) are hidden behind the panel.  I have tried to create an inline style for the editor and set the z-index to several different values, but the problem persists.

    Ryan A.

     
                <asp:Button ID="btnPostReplyModal" runat="server" Style="display:none;" /> 
                <asp:Panel ID="pnlPostReply" runat="server" Style="display:none;"
                    <div class="alert"
                        <div class="controlSection"
                            <div class="sectionHeading">Post New Reply</div> 
                            <div style="margin-top:5px;"
                                <b>Title:</b> 
                                <asp:TextBox ID="txtReplyTitle" runat="server" Width="50%" /> 
                            </div> 
                            <div style="margin-top:5px;"
                                <telerik:RadEditor ID="radReplyText" runat="server" Style="z-index:100000 !important;" Height="300px" Width="100%" ToolsFile="~/EditorToolbars/Simple.xml" EditModes="Design" /> 
                            </div> 
                            <div style="margin-top:5px;"
                                <asp:CheckBox ID="chkEmailReply" runat="server" Text="Email" /> 
                            </div> 
                            <div style="margin-top:5px;"
                                <asp:Button ID="btnPostReplyOk" runat="server" SkinID="OkLarge" ToolTip="Post Reply" /> 
                                <asp:Button ID="btnPostReplyCancel" runat="server" SkinID="CancelSmall" ToolTip="Cancel Reply" /> 
                            </div> 
                        </div> 
                    </div> 
                </asp:Panel> 
                <cc1:ModalPopupExtender ID="mpePostReply" runat="server" TargetControlID="btnPostReplyModal" PopupControlID="pnlPostReply" /> 
     

  8. Rumen
    Admin
    Rumen avatar
    12847 posts

    Posted 20 Oct 2008 Link to this post

    Hi Ryan,

    I was not able to reproduce the problem, but this is the class that is applied to the dropdowns of RadEditor

    .Default.rade_dropDownBody

    when the editor is using the Default skin.

    My suggestion is to see whether the following style will fix the problem on your end:

    .Default.rade_dropDownBody
    {
         z-index: 20000 !important;
    }

    If this does not solve the issue, please open a support ticket and send a fully working project. I will examine it and provide a solution.

    Regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. David Moore
    David Moore avatar
    23 posts
    Member since:
    Jul 2008

    Posted 15 Oct 2009 Link to this post

    I am having this same issue. Works great in IE (what are the odds?) but in firefox I'm having problems.

    Any of the radeditor popup dialogs appear not only behind the radeditor, but behind my modal as well.  Z-index does not appear to have the effect that it should.

    thanks.
  10. Rumen
    Admin
    Rumen avatar
    12847 posts

    Posted 21 Oct 2009 Link to this post

    Hi David,

    Please, open a support ticket and send a sample fully working project that demonstrates the z-index problem in Firefox. After reproducing the problem on my end, I will be able to provide a solution.

    In the meantime you can fix the problem by using the solution in this KB article: Using browser modal dialog instead of RadWindow.

    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017