[ISSUE] RadEditor: Automatic Width Growth

[Cristian]

Hi all,

I've been experiencing width issues with the RadEditor. More exactly, when I type a continuous single line paragraph the width of the textbox dynamically grows accordingly to the line width.

Find attached screenshots showing the problem.

Thanks in advance.

Code

<telerik:RadEditor ID="txtBody" runat="server" EditModes="Design" Width="98%" Height="200px"
                    ContentAreaMode="Div" NewLineBr="true" ToolbarMode="Default" AutoResizeWidth="false"  >
                    <Tools>
                        <telerik:EditorToolGroup Tag="Edit">
                            <telerik:EditorTool Name="Undo" />
                            <telerik:EditorTool Name="Redo" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="Cut" />
                            <telerik:EditorTool Name="Copy" />
                            <telerik:EditorTool Name="Paste" ShortCut="CTRL+!" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="PasteFromWord" />
                            <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
                            <telerik:EditorTool Name="PastePlainText" />
                            <telerik:EditorTool Name="PasteAsHtml" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="Print" />
                            <telerik:EditorTool Name="SelectAll" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="InsertDate" />
                            <telerik:EditorTool Name="InsertTime" />
                        </telerik:EditorToolGroup>
                        <telerik:EditorToolGroup Tag="Font">
                            <telerik:EditorTool Name="Bold" />
                            <telerik:EditorTool Name="Italic" />
                            <telerik:EditorTool Name="Underline" />
                            <telerik:EditorTool Name="StrikeThrough" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="JustifyLeft" />
                            <telerik:EditorTool Name="JustifyCenter" />
                            <telerik:EditorTool Name="JustifyRight" />
                            <telerik:EditorTool Name="JustifyFull" />
                            <telerik:EditorTool Name="JustifyNone" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="Superscript" />
                            <telerik:EditorTool Name="Subscript" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="ConvertToLower" />
                            <telerik:EditorTool Name="ConvertToUpper" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="Indent" />
                            <telerik:EditorTool Name="Outdent" />
                            <telerik:EditorTool Name="InsertOrderedList" />
                            <telerik:EditorTool Name="InsertUnorderedList" />
                            <telerik:EditorTool Name="ToggleTableBorder" />
                        </telerik:EditorToolGroup>
                        <telerik:EditorToolGroup Tag="Color-Font">
                            <telerik:EditorTool Name="ForeColor" />
                            <telerik:EditorTool Name="BackColor" />
                            <telerik:EditorSeparator />
                            <telerik:EditorTool Name="FontName" />
                            <telerik:EditorTool Name="FontSize" />
                        </telerik:EditorToolGroup>
                    </Tools>
                </telerik:RadEditor>

Library Specs

• Telerik.Web.UI Version=2011.3.1305.35

[Rumen]

Hello,

This is not a bug, but a default behavior of the editable div elements in the browser. You can reproduce the same behavior with an editable div in your browser.

The text wrapping issue is a standard feature of the editable DIV element and you can disable it by putting the following CSS class in the <style> tag of the page with RadEditor:

Copy Code

.reContentArea
{
 word-wrap: break-word;
 width: 300px;
}

The width property should be explicitly set because in other case the div will be expanded around the boundaries of the non breaking content.

Here is an example which demonstrates how to implement the solution and integrate it with the resize handler of RadEditor in multiple RadEditors scenario:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .reContentArea
        {
            word-wrap: break-word;
            width: 670px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1" />
    <telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="Div" OnClientLoad="editorLoad">
        <Content>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Content>
    </telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor2" runat="server" ContentAreaMode="Div" OnClientLoad="editorLoad">
        <Content>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Content>
    </telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor3" runat="server" ContentAreaMode="Div" OnClientLoad="editorLoad">
        <Content>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Content>
    </telerik:RadEditor>
    <script type="text/javascript">
        function editorLoad(editor, args) {
            var $ = $telerik.$;
            var editorID = editor.get_id();

            $("#" + editorID + "BottomResizer").on("mousedown", function () {
                $("#" + editorID).on("mousemove", function (event) {
                    $(event.delegateTarget).find(".reContentArea").width($("#" + editorID).width() - 10);
                })
            });
            $(document).bind("mouseup", function () {
                $("#" + editorID).off("mousemove");
            });
        }
    </script>
    </form>
</body>
</html>

All the best,
Rumen
the Telerik team

[Cristian]

Thanks Rumen, that indeed solved my problem.

Best Regards,
Cristian.

[mihir]

but it is not work  when we not include property ContentAreaMode.

[Rumen]

Hello,

Could you please explain your scenario in more details? Which version of RadEditor do you use? What is the exact problem? How to replicate it on our end? Is it reproducible in the live demos of RadEditor?

When the ContentAreaMode property is not explicitly set, its default value is Iframe.

Kind regards,
Rumen
the Telerik team

[Chris]

I know this is an old thread, but I wanted to request another solution since the (word-wrap:none) does not work for certain versions of css.

[Ivaylo]

Hello Chris,

Thank you for contacting us.

I am not sure if I understand your question correctly. The word-wrap CSS property does not support a value of none in any CSS version and the only supported values are break-word and normal, as you can verify yourself in the following links: CSS3 word-wrap Property and CSS WORD-WRAP.

The property that my colleague has suggested using is word-wrap: break-word.

I have tested the solution provided in one of the previous posts and can confirm that it achieves the desired behavior in all major browsers (IE, Chrome, Firefox, Opera, and Safari).

Could you, please, try replacing word-wrap: none with word-wrap: break-word and see if the experienced problem with the Editor remains?

If this is not the case - could you explain in more details what is the exact issue you are facing?

I hope that the provided information will be helpful. We will be expecting your feedback in case the problem persists.

Regards,
Ivaylo
Telerik