This is a migrated thread and some comments may be shown as answers.

Inline mode height

7 Answers 84 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 07 Feb 2017, 07:46 PM

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.

7 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 08 Feb 2017, 12:43 PM

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
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.
0
Alex
Top achievements
Rank 1
answered on 08 Feb 2017, 02:20 PM

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?

0
Rumen
Telerik team
answered on 08 Feb 2017, 03:24 PM

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.
0
Alex
Top achievements
Rank 1
answered on 08 Feb 2017, 04:31 PM
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.
0
Rumen
Telerik team
answered on 08 Feb 2017, 11:21 PM

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
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.
0
Alex
Top achievements
Rank 1
answered on 09 Feb 2017, 12:48 PM
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.
0
Rumen
Telerik team
answered on 09 Feb 2017, 03:15 PM

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.
Tags
Editor
Asked by
Alex
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Alex
Top achievements
Rank 1
Share this question
or