RadEditor is not working at all inside a ModalPopupExtender

[Andrés Salinas]

Hi,

I have a RadEditor inside a panel, that I'm showing through a modalPopupExtender, but only the buttons from the editor works. (like bold and italic buttons), but the dropdown style buttons won't work. (like selecting font)

Here is the code:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <asp:UpdatePanel runat="server" ID="updatePanel1">
        <ContentTemplate>
            <asp:Button ID="btn_test" Text="Test" runat="server" />

            <cc1:ModalPopupExtender ID="btn_test_ModalPopupExtender" runat="server"
                DynamicServicePath="" Enabled="True" PopupControlID="panelPopup"
                TargetControlID="btn_test">
            </cc1:ModalPopupExtender>

            <asp:Panel runat="server" ID="panelPopup">
                <telerik:RadEditor runat="server" ID="RadEditor1">
                </telerik:RadEditor>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Any kind of help is welcome!

thanks a lot!

[Rumen]

Hi Andrés,

The reason for this behavior is that the modal popup extender has a very high z-Index, especially in Firefox. To fix this issue, I suggest to use the following styles

<style type="text/css">
.Default.reDropDownBody
{
    z-index: 210990 !important;
}
.RadWindow.RadWindow_Default.rwNormalWindow.rwTransparentWindow
{
    z-index: 110000 !important;
}
.RadWindow.RadWindow_Default.rwNormalWindow.rwTransparentWindow.rwInactiveWindow
{
    z-index: 10990 !important;
}
</style>

Best 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.

[letrungthang]

Thanks so much!