RadEditor not displaying properly

[Ram]

Hi,
I am trying to use RadEditor in my app but the content is all jumbled up (please see attached). I think what is happening is that the style from the parent tags are affecting the style of RadEditor. How can I cancel the styles applied from the parent tags? Thanks!
Kate

[Bozhidar]

Hello Kate,

Without a code provided I could only presume what causes that problem. The most common situation is that you have a global styles set in your CSS that overwrite the RadEditor Styles.

RadEditor is a composite control which is built with a few HTML elements: TABLE, TR, TD, DIV, SPAN, UL, LI, A. In order to avoid any conflict you should not set any global styles for these elements. For example, if you use the following code in your styles to colorize the table background in Red, it will be applied to the RadEdtor TABLE which is not wished:

table
 {
   background: red;
 }

To avoid this you should use class names or IDs for the elements that are not part of Telerik Controls. The above code could be set like that:

table.RedBgr
 {
   background: red;
 }

Now, when you have this class in your styles, the red background of the TABLE element will be applied only to those tables with class="RedBgr":

<table cellpadding="0" cellspacing="0" class="RedBgr">
 <tr>
  <td>some content</td>
 </tr>
</table>

For more information you could read the following article: Overriding Global CSS Styles Inherited by RadEditor in the Telerik Knowledge Base.

Here are the class names listed in the KB article:

/* global styles css reset (prevent mode) */
        .RadEditor table,
        .reToolbar,
        .reToolbar li,
        .reTlbVertical,
        .reDropDownBody ul,
        .reDropDownBody ul li,
        .RadWindow table,
        .RadWindow table td,
        .RadWindow table td ul,
        .RadWindow table td ul li
        {
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            list-style: none !important;
        }
        .reWrapper_corner,
        .reWrapper_center,
        .reLeftVerticalSide,
        .reRightVerticalSide,
        .reToolZone,
        .reEditorModes,
        .reResizeCell,
        .reToolZone table td,
        .RadEditor .reToolbar,
        .RadEditor .reEditorModes
        {
            border: 0 !important;
        }
        .reToolbar li,
        .reToolbar ul li,
        .reInsertTable .reTlbVertical .reToolbar li
        {
            float: left !important;
            clear: none !important;
            border: 0 !important;
        }

If you still experience any problems with setting RadEdtor, please provide a solution attached or live URl and we will be happy to help you.

Kind regards,
Bojo
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.

[Amruta]

The rad editor which is in td of table is not aligning properly with version 2016.1.225.35
below is my html

<td valign="top">
                                <asp:textbox tabindex="5" id="txtMessage" visible="false" runat="server" cssclass="txtfields" maxlength="3000" columns="80" rows="15" textmode="MultiLine" width="568">
                            
                                </asp:textbox>
                                <telerik:radeditor externaldialogspath="~/UserControls/" id="txtEditorMessage" runat="server" stripformattingonpaste="All" editmodes="Design" height="363px" width="572px" toolswidth="420px" toolsfile="xml/ToolsFile_launch.xml" spellchecksettings-spellcheckprovider="EditDistanceProvider" spellchecksettings-editdistance="1" stripformattingoptions="NoneSupressCleanMessage" newlinebr="true" font-size="14px">
                                    <content>
                                                  </content>
                                    <cssfiles>
                                        <telerik:editorcssfile value="~/App_Themes/event-editor.css" />
                                    </cssfiles>
                                    <contextmenus>
                                        <telerik:editorcontextmenu tagname="BODY" enabled="true">
                                            <telerik:editortool name="Cut" />
                                            <telerik:editortool name="Copy" />
                                            <telerik:editortool name="Paste" />
                                        </telerik:editorcontextmenu>
                                    </contextmenus>
                                </telerik:radeditor>
                            </td>