z-index of Image Manager

[Jeff]

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?

[Rumen]

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.

[Jeff]

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.

[Scott]

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.

 

[Rumen]

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.

[Ryan]

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" />

[Rumen]

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.

[David Moore]

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.

[Rumen]

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.