Skip to content

Commit e0f2c7a

Browse files
JekataJekata
committed
kb(editor): auto height multiple editors in a row to the height of the largest one
1 parent 98164eb commit e0f2c7a

File tree

1 file changed

+171
-0
lines changed

1 file changed

+171
-0
lines changed

‎knowledge-base/editor-auto-height-accommodate-content-height-of-the-tallest-editor.md

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
title: Setting the height of each editor to expand to the height of largest one
3+
description: Learn how to automatically resize the height of each editor to expand to the height of the largest one - RadEditor for ASP.NET AJAX
4+
type: how-to
5+
page_title: Setting the height of each editor to expand to the height of largest one
6+
slug: editor-auto-height-accommodate-content-height-of-the-tallest-editor
7+
position:
8+
tags:
9+
ticketid: 1564906
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadEditor for ASP.NET AJAX</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
*I have an ASP.NET table where each row has 3 cells with RadEditors in each cell populated with dynamic content. Is there a way to set the height of each editor to expand to the largest one in the row. For example, the first editor is populated and has a larger height than the other two, which are not populated. I'd like the heights to somehow be the same, without having to set a static value in code-behind. I'd like each row's 3 editor controls to match the height of the largest in the row.*
26+
27+
## Solution
28+
Solution 1: When the RadEditor controls are enabled - get references to all editors, get their div content area height, compare them to get the highest value and set it via the editor.setSize method:
29+
30+
````ASP.NET
31+
<script>
32+
var divHeight;
33+
const editorHeight = [];
34+
function OnClientLoad(editor, args) {
35+
36+
divHeight = editor.get_contentArea().offsetHeight;
37+
38+
39+
editorHeight.push(divHeight);
40+
41+
const max = Math.max(...editorHeight);
42+
editor.setSize(700, max + 100);
43+
}
44+
</script>
45+
<table >
46+
<tr>
47+
<td>
48+
<telerik:RadEditor ID="RadEditor1" runat="server" Height="100%" ContentAreaMode="div" OnClientLoad="OnClientLoad">
49+
<Content>
50+
line1 <br/> line 2 <br /> line 3 <br /> line4 <br/> line 5 <br /> line 6 <br/> line 7 <br /> line 8 <br /> line 9 <br /> line 10 <br /> line 11line1 <br/> line 2 <br /> line 3 <br /> line4 <br/> line 5 <br /> line 6 <br/> line 7 <br /> line 8 <br /> line 9 <br /> line 10 <br /> line 11
51+
</Content>
52+
<Tools>
53+
<telerik:EditorToolGroup>
54+
<telerik:EditorTool Name="Bold" />
55+
</telerik:EditorToolGroup>
56+
</Tools>
57+
<Modules>
58+
<telerik:EditorModule Visible="false" Enabled="false" />
59+
</Modules>
60+
</telerik:RadEditor>
61+
</td>
62+
<td>
63+
<telerik:RadEditor ID="RadEditor2" runat="server" height="100%" ContentAreaMode="div" OnClientLoad="OnClientLoad">
64+
<Content>
65+
line1 <br/> line 2 <br /> line 3 <br /> line4 <br/> line 5 <br /> line 6 <br/> line 7 <br /> line 8 <br /> line 9 <br /> line 10 <br /> line 11
66+
</Content>
67+
<Tools>
68+
<telerik:EditorToolGroup>
69+
<telerik:EditorTool Name="Bold" />
70+
</telerik:EditorToolGroup>
71+
</Tools>
72+
<Modules>
73+
<telerik:EditorModule Visible="false" Enabled="false" />
74+
</Modules>
75+
</telerik:RadEditor>
76+
</td>
77+
<td>
78+
<telerik:RadEditor ID="RadEditor3" runat="server" height="100%" ContentAreaMode="div" OnClientLoad="OnClientLoad">
79+
<Tools>
80+
<telerik:EditorToolGroup>
81+
<telerik:EditorTool Name="Bold" />
82+
</telerik:EditorToolGroup>
83+
</Tools>
84+
<Content>
85+
line1 <br/> line 2 <br /> line 3
86+
</Content>
87+
<Modules>
88+
<telerik:EditorModule Visible="false" Enabled="false" />
89+
</Modules>
90+
</telerik:RadEditor>
91+
</td>
92+
</tr>
93+
</table>
94+
````
95+
96+
Solution 2: When the editors are disabled with Enabled="false" - when the Enabled property is set to false, the editor is rendered as a simple div element with the content in it. You can use the pageLoad event to get references to the div elements, measure their height and set the size of the tallest one, e.g.
97+
98+
````ASP.NET
99+
<script>
100+
var divHeight;
101+
const editorHeight = [];
102+
function pageLoad() {
103+
var editorsIds = ["RadEditor1", "RadEditor2", "RadEditor3"];
104+
for (var i = 0; i < editorsIds.length; i++) {
105+
var editorContentWrappers = document.getElementById(editorsIds[i]);
106+
divHeight = editorContentWrappers.offsetHeight;
107+
editorHeight.push(divHeight);
108+
const max = Math.max(...editorHeight);
109+
console.log(max)
110+
//editor.setSize(700, max + 100);
111+
editorContentWrappers.style.height = max + "px";
112+
editorContentWrappers.style.border = "1px solid red";
113+
}
114+
}
115+
</script>
116+
<table >
117+
<tr>
118+
<td>
119+
<telerik:RadEditor ID="RadEditor1" runat="server" Height="100%" ContentAreaMode="div" OnClientLoad="OnClientLoad" Enabled="false">
120+
<Content>
121+
line1 <br/> line 2 <br /> line 3 <br /> line4 <br/> line 5 <br /> line 6 <br/> line 7 <br /> line 8 <br /> line 9 <br /> line 10 <br /> line 11 <br />line1 <br/> line 2 <br /> line 3 <br /> line4 <br/> line 5 <br /> line 6 <br/> line 7 <br /> line 8 <br /> line 9 <br /> line 10 <br /> line 11
122+
</Content>
123+
<Tools>
124+
<telerik:EditorToolGroup>
125+
<telerik:EditorTool Name="Bold" />
126+
</telerik:EditorToolGroup>
127+
</Tools>
128+
<Modules>
129+
<telerik:EditorModule Visible="false" Enabled="false" />
130+
</Modules>
131+
</telerik:RadEditor>
132+
</td>
133+
<td>
134+
<telerik:RadEditor ID="RadEditor2" runat="server" height="100%" ContentAreaMode="div" OnClientLoad="OnClientLoad" Enabled="false">
135+
<Content>
136+
line1 <br/> line 2 <br /> line 3 <br /> line4 <br/> line 5 <br /> line 6 <br/> line 7 <br /> line 8 <br /> line 9 <br /> line 10 <br /> line 11
137+
</Content>
138+
<Tools>
139+
<telerik:EditorToolGroup>
140+
<telerik:EditorTool Name="Bold" />
141+
</telerik:EditorToolGroup>
142+
</Tools>
143+
<Modules>
144+
<telerik:EditorModule Visible="false" Enabled="false" />
145+
</Modules>
146+
</telerik:RadEditor>
147+
</td>
148+
<td>
149+
<telerik:RadEditor ID="RadEditor3" runat="server" height="100%" ContentAreaMode="div" OnClientLoad="OnClientLoad" Enabled="false">
150+
<Tools>
151+
<telerik:EditorToolGroup>
152+
<telerik:EditorTool Name="Bold" />
153+
</telerik:EditorToolGroup>
154+
</Tools>
155+
<Content>
156+
line1 <br/> line 2 <br /> line 3
157+
</Content>
158+
<Modules>
159+
<telerik:EditorModule Visible="false" Enabled="false" />
160+
</Modules>
161+
</telerik:RadEditor>
162+
</td>
163+
</tr>
164+
</table>
165+
````
166+
167+
## See Also
168+
* [Automatic Height Resize](https://demos.telerik.com/aspnet-ajax/editor/examples/autoresizeheight/defaultcs.aspx)
169+
170+
171+

0 commit comments

Comments
 (0)