Editor format lists hidden in Modal

[Ryan]

I am having a problem with the editor tool bar.  I have placed the a RAD editor 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, making it impossible to choose from their options.  I have tried to create an inline style for the editor and set the z-index to several different values, but the problem persists.

Please advise,
Ryan A.

        <div id="replyPanel">
            <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" 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" />
        </div>

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