radeditor width 100%

4 posts, 0 answers
  1. Jean-Marc
    Jean-Marc avatar
    93 posts
    Member since:
    Mar 2011

    Posted 17 Jul 2013 Link to this post

    Hi,
    I set width=100%, because I want that my editor resizes every time I do the resize of my browser window, like responsive layout. (I would set a minimum width of 600px)
    But it does not work: the editor does not resize and the scrollbars appear.how can I do? thanks


    to be more clear: I want to act like when it opens in full screen mode!

    <    telerik:RadEditor

    Width="100%"

    Height="750px"

    ID="RadEditor1" Skin="Silk"

    Runat="server"

    ToolsFile="/Admin/DocumentsManagementV3/xml/ToolsFile.xml"

    SkinID="DefaultSetOfTools">

    </telerik:RadEditor>



  3. Vessy
    Admin
    Vessy avatar
    2421 posts

    Posted 18 Jul 2013 Link to this post

    Hello Jean,

    By design RadEditor does not support size in percentages and this is why its size is not reset when browser window is resized.

    The only possible approach I could suggest you is to implement your all Client-Side logic on the Editor's load and the window resize events. In this function you could take the current size of the browser window and set it as a width of the RadEditor control by using its setSize() method. You can do it in a similar way:
    <telerik:RadEditor Width="100px" Height="750px" ID="RadEditor1" Skin="Silk" runat="server" OnClientLoad="resizeEditor"
        _ToolsFile="/Admin/DocumentsManagementV3/xml/ToolsFile.xml" _SkinID="DefaultSetOfTools">
    </telerik:RadEditor>
    <script type="text/javascript">
        Sys.Application.add_load(function () {
            window.onresize = resizeEditor;
        })
     
        function resizeEditor() {
            var editor = $find("<%=RadEditor1.ClientID %>");
            //set the width and height of the RadEditor
            var windowWidth = $telerik.$(window).width();
            var editorHeight = $telerik.$("#" + editor.get_id()).height();
            editor.setSize(windowWidth - 20, editorHeight);
        }
    </script>

    Note, that if the initially set width of the Editor is configured in percentages the code above will not work. I hope this helps.

    Regards,
    Veselina Raykova
    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.
  5. Waseem
    Waseem avatar
    6 posts
    Member since:
    Mar 2014

    Posted 20 Jun 2019 in reply to Vessy Link to this post

    Dear i have one small issue, html editor width is not 100%, how to fix this issue. 

     

    Regards

    Waseem

  7. Vessy
    Admin
    Vessy avatar
    2421 posts

    Posted 24 Jun 2019 Link to this post

    Hi Waseem,

    You can see a possible way to avoid this behavior in the following forum post:
    https://www.telerik.com/forums/get-textarea-bounds-5d3cde3383b7#DO2v-4Zs-0WKqOf-zOqHEA

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
Back to Top