radeditor width 100%

2 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
    1982 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.
Back to Top