Editor - Automatic Height Resize

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

AutoResizeHeight Options

Enable / Disable AutoResizeHeight

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The value of the AutoResizeHeight property indicates whether the RadEditor will auto-resize its height to match content height.

This property is similar to the Overflow property of the DIV element, which is not supported by the IFRAME elements.

When the AutoResizeHeight property is set to true, then the editor's content area is resizing to match content heigh and no scrollbars will appear.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.AutoResizeHeight.DefaultCS"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Width="800px">
            <Content>
                <img alt="product logo" src="../../images/productLogoLight.gif" /> is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
                <ul>
                    <li><em>Single-file, drag-and-drop deployment</em></li>
                    <li><em>Built on top of ASP.NET AJAX</em></li>
                    <li><em>Unmatched loading speed with new semantic rendering </em></li>
                    <li><em>Full keyboard accessibility</em></li>
                    <li><em>Flexible Skinning mechanism</em></li>
                    <li><em>Simplified and intuitive toolbar configuration</em></li>
                    <li><em>Out-of-the-box XHTML-enabled output</em></li>
                </ul>
            </Content>
        </telerik:RadEditor>
    </div>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadioButtonListAutoResizeHeight">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonListAutoResizeHeight" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="AutoResizeHeight Options">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Enable / Disable AutoResizeHeight">
                    <qsf:RadioButtonList runat="server" ID="RadioButtonListAutoResizeHeight"
                        OnSelectedIndexChanged="RadioButtonListAutoResizeHeight_SelectedIndexChanged" AutoPostBack="True">
                        <asp:ListItem Value="True" Selected="True">Auto Resize to Fit Content Height (no scrollers)</asp:ListItem>
                        <asp:ListItem Value="False">Fixed-height content Area (with scrollers)</asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?