[ISSUE] RadEditor: Automatic Width Growth

7 posts, 1 answers
  1. Cristian
    Cristian avatar
    2 posts
    Member since:
    Feb 2012

    Posted 10 Feb 2012 Link to this post

    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
  2. Answer
    Rumen
    Admin
    Rumen avatar
    13884 posts

    Posted 10 Feb 2012 Link to this post

    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">
    <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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. Cristian
    Cristian avatar
    2 posts
    Member since:
    Feb 2012

    Posted 10 Feb 2012 Link to this post

    Thanks Rumen, that indeed solved my problem.

    Best Regards,
    Cristian.
  4. mihir
    mihir avatar
    6 posts
    Member since:
    Sep 2012

    Posted 02 Jul 2012 Link to this post

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

  5. Rumen
    Admin
    Rumen avatar
    13884 posts

    Posted 03 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Chris
    Chris avatar
    2 posts
    Member since:
    May 2013

    Posted 18 Jun 2013 Link to this post

    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.
  7. Ivaylo
    Admin
    Ivaylo avatar
    37 posts

    Posted 20 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top