Inline mode height

[Alex]

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.

[Rumen]

Hello Alex,

RadEditor is rendered as an editable <div> in 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

[Alex]

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?

[Rumen]

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

[Alex]

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.

[Rumen]

Hello Alex,

You can see how to execute JavaScript from the server () 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

[Alex]

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.

[Rumen]

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