Inline mode height

8 posts, 0 answers
  1. Alex
    Alex avatar
    37 posts
    Member since:
    Jun 2011

    Posted 07 Feb Link to this post

    Is there a way to specify the height when in inline mode?  That is, a fixed height?

     

    <telerik:RadEditor ID="RadEditor1" runat="server" Height="100px" EditType="Inline"></telerik:RadEditor>

     

    I'm using Inline mode in order to subscribe to OnClientInlineEditCompleted to cause a postback when the user changes the value of the control.

  2. Rumen
    Admin
    Rumen avatar
    13082 posts

    Posted 08 Feb Link to this post

    Hello Alex,

    RadEditor is rendered as an editable <div> in inline mode so its height automatically accommodates the height of the available div content.

    Nevertheless, you can control the div dimensions using the following CSS class:

        <style>
            .reContentArea.reContentAreaToggle {
                height: 100px !important;
                overflow: auto !important;
                border: 1px solid red !important;
            }     
        </style>

     

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alex
    Alex avatar
    37 posts
    Member since:
    Jun 2011

    Posted 08 Feb in reply to Rumen Link to this post

    Thank you for the quick reply as always!  Unfortunately, this solution won't work for me since I have multiple RadEditor instances on the same page and they can have differing heights.  These instances are being created dynamically.  Is there a way to set the style for each editor directly since they need to be different?

     

    Alternately, is there a way to trigger a postback when the user changes the text without using Inline mode?

  4. Rumen
    Admin
    Rumen avatar
    13082 posts

    Posted 08 Feb Link to this post

    Hello Alex,

    Here is an example how to programmatically set the RadEditor height:

    <script>
        function OnClientLoad(editor) {
            editor.get_contentArea().style.height = "50px";
            editor.get_contentArea().style.minHeight = "50px";
            editor.get_contentArea().style.overflow = "scroll"; //or auto
            editor.get_contentArea().style.border = "1px solid red";
        }
    </script>
    <telerik:RadEditor RenderMode="Lightweight" OnClientLoad="OnClientLoad" Height="50px" runat="server" ID="RadEditor2" EditType="Inline" >
        <Content>
        <h2>So what exactly constitutes a responsive web design?</h2>
        <div>
            <img src="images/content-water.png" style="margin-bottom: 5px;" width="420" />
        </div>
        <em>
            The original illustration belongs to <a href="http://www.inpixelitrust.fr/">Stéphanie Walter</a>
        </em>
        <p>The concept of responsive web design
        (<b>RWD</b>) suggests that the layout of the project needs to adapt to the
        media that renders it. The content of the application needs to be like
        water and make efficient use of the available space on the screen.
        Additionally, the content should be easily readable with appropriate
        font and image sizes.</p>
        </Content>
    </telerik:RadEditor>

    You can also use jQuery:

    $telerik.$(".reContentArea.reContentAreaToggle").css("height", "50px");
    $telerik.$(".reContentArea.reContentAreaToggle").css("min-height", "50px");
    $telerik.$(".reContentArea.reContentAreaToggle").css("overflow", "auto");

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Alex
    Alex avatar
    37 posts
    Member since:
    Jun 2011

    Posted 08 Feb in reply to Rumen Link to this post

    So there's no way that I can do this in the code behind?  Can I get a reference to the content area there and set the values or will they be overwritten?  If not, then my client loading will need to have a separate function for each editor since the heights can all be different.
  6. Rumen
    Admin
    Rumen avatar
    13082 posts

    Posted 08 Feb Link to this post

    Hello Alex,

    You can see how to execute JavaScript from the server (codebehind) in this article: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/executing-javascript-code-from-server. You can use this function ScriptManager.RegisterStartupScript.

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Alex
    Alex avatar
    37 posts
    Member since:
    Jun 2011

    Posted 09 Feb in reply to Rumen Link to this post

    Rumen, I understand how to execute JavaScript from server side.  My issue is that I will need to embed a function for each RadEditor. That seems very inefficient for the client when multiple editors (with different heights) exist on the same page.
  8. Rumen
    Admin
    Rumen avatar
    13082 posts

    Posted 09 Feb Link to this post

    Hello Alex,

    Here is a code behind solution for multiple editors based on custom attributes:

    ASPX.CS
     
    protected void Page_Load(object sender, System.EventArgs e)
    {
        RadEditor editor1 = new RadEditor();
        editor1.EditType = EditorEditType.Inline;
        editor1.Content = "Some content";
        editor1.Attributes.Add("fix-height", "50px");
        editor1.Attributes.Add("fix-min-height", "50px");
        editor1.OnClientLoad = "fixHeightOnLoad";
        form1.Controls.Add(editor1);
     
        RadEditor editor2 = new RadEditor();
        editor2.EditType = EditorEditType.Inline;
        editor2.Content = "Some content";
        editor2.Attributes.Add("fix-height", "100px");
        editor2.Attributes.Add("fix-min-height", "100px");
        editor2.OnClientLoad = "fixHeightOnLoad";
     
        form1.Controls.Add(editor2);
    }
     
    ASPX
    <script>
        function fixHeightOnLoad(editor, args) {
            var height = editor.get_element().getAttribute("fix-height");
            var minHeight = editor.get_element().getAttribute("fix-min-height");
            editor.get_contentArea().style.height = height;
            editor.get_contentArea().style.minHeight = minHeight;
        }
    </script>

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top