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

RadEditor Height not working properly

1 Answer 306 Views

Editor

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

Sekar asked on 02 Apr 2010, 07:11 PM

Hi Telerik
I am using Telerik ASP.NET Q1 2010 release. I have a situation in which i need 3 fields to be edited in HTML mode. I have very limited space and the content to be edited is also potentially less than 100 words. So i decided to use 3 Rad Editors with limited tools (created a new tools XML) and set the height to 100px - But please take a look at the below URL where i have recorded the behaviour of these RadControls. The editor box itself overflows more than 100px in height and the bottom edit mode buttons are not inside the control border. But intrestingly when i reload, for a short moment you can see the controls are re-arranging in a proper height but after reload it looks the same old way.

Take a look at the behaviour here - http://screencast.com/t/NDk4N2Fk

Please explain me why is this happening.

Background Info
DotNetNuke 4.x site
Using RadTabStrip with RadPageView to show the tab. (The editor resides inside the page view)
Telerik Q1 2010 release dlls

Let me know if you need any more details (FYI - for security reasons i cannot give you any link for that page)

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FormBuilderDetails.aspx.cs" 
        
                Inherits="EM2.UI.FormBuilderDetails" %> 
        
            <%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Form Builder</title> 
        
                <link id="_em2Admin_Portals_0_" rel="stylesheet" type="text/css" href="/Portals/0/portal.css" /> 
        
                <link id="_em2Admin_Portals__default_" rel="stylesheet" type="text/css" href="/Portals/_default/default.css" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <rad:RadScriptManager ID="script1" runat="server"> 
        
                </rad:RadScriptManager> 
        
                <rad:RadTabStrip ID="tabStrip1" runat="server" MultiPageID="multiPage1" ClickSelectedTab="true"> 
        
                    <Tabs> 
        
                        <rad:RadTab id="tbGeneral" runat="server" Text="General" PageViewID="pgEditSection"> 
        
                        </rad:RadTab> 
        
                        <rad:RadTab id="tbAdvanced" runat="server" Text="Advanced" Visible="false"> 
        
                        </rad:RadTab> 
        
                        <rad:RadTab id="tbValidation" runat="server" Text="Validation" Visible="false"> 
        
                        </rad:RadTab> 
        
                        <rad:RadTab id="tbCondition" runat="server" Text="Condition" Visible="false"> 
        
                        </rad:RadTab> 
        
                        <rad:RadTab id="tbHTML" runat="server" Text="HTML" Visible="false"> 
        
                        </rad:RadTab> 
        
                    </Tabs> 
        
                </rad:RadTabStrip> 
        
                <h4> 
        
                    <asp:Label ID="lblPageHead" runat="server"></asp:Label></h4> 
        
                <rad:RadMultiPage ID="multiPage1" runat="server"> 
        
                    <rad:RadPageView ID="pgEditSection" runat="server" Visible="true"> 
        
                        <div style="width: 80%"> 
        
                            <fieldset class="fs_edit"> 
        
                                <table > 
        
                                    <tr> 
        
                                        <td> 
        
                                            Section Name 
        
                                        </td> 
        
                                        <td> 
        
                                            <asp:TextBox ID="txtSectionName" runat="server"></asp:TextBox> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td> 
        
                                            CSS 
        
                                        </td> 
        
                                        <td> 
        
                                            <telerik:RadComboBox ID="rcbSectionCSS" runat="server" Skin="Web20" Text="Select One..." 
        
                                                ExpandAnimation-Type="OutBack" CollapseAnimation-Type="InBack" Width="150px"  
        
                                                DropDownWidth="150px"> 
        
                                            </telerik:RadComboBox> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td> 
        
                                            Header Text 
        
                                        </td> 
        
                                        <td > 
        
                                            <rad:RadEditor ID="radSectionHeader" EnableResize="false"  
        
                                                ToolsFile="~/Resources/RadControls/Editor/ToolsFile_Minimal.xml" ToolbarMode="ShowOnFocus" 
        
                                                runat="server" Width="500px" Height="100px"> 
        
                                            </rad:RadEditor> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td> 
        
                                            Body Text 
        
                                        </td> 
        
                                        <td style="height:175px"> 
        
                                            <rad:RadEditor ID="radSectionBody" EnableResize="false" StripFormattingOnPaste="All" 
        
                                                ToolsFile="~/Resources/RadControls/Editor/ToolsFile_Minimal.xml" ToolbarMode="ShowOnFocus" 
        
                                                runat="server" Width="500px" Height="100px"> 
        
                                            </rad:RadEditor> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td> 
        
                                            Footer Text 
        
                                        </td> 
        
                                        <td style="height:125px"> 
        
                                            <rad:RadEditor ID="radSectionFooter" EnableResize="false" StripFormattingOnPaste="All" 
        
                                                ToolsFile="~/Resources/RadControls/Editor/ToolsFile_Minimal.xml" ToolbarMode="ShowOnFocus" 
        
                                                runat="server" Width="500px" Height="100px"> 
        
                                            </rad:RadEditor> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td> 
        
                                            <asp:Button ID="btnUpdate" Text="Update" runat="server" /> 
        
                                        </td> 
        
                                    </tr> 
        
                                </table> 
        
                            </fieldset> 
        
                        </div> 
        
                    </rad:RadPageView> 
        
                </rad:RadMultiPage> 
        
                </form> 
        
            </body> 
        
            <script type="text/javascript"> 
        
                    function GetRadWindow() { 
        
                        var oWindow = null; 
        
                        if (window.radWindow) oWindow = window.radWindow; 
        
                        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; 
        
                        return oWindow; 
        
                    } 
        
                    function CloseAndReload(status) { 
        
                        //       if(reload) 
        
                        RefreshParentPage(status); 
        
                        GetRadWindow().Close(); 
        
                    } 
        
                    function RefreshParentPage(status) { 
        
                        var parentWin = GetRadWindow().BrowserWindow; 
        
                        parentWin.G_DoRefreshPage = true; 
        
                        parentWin.refreshEditor(status); 
        
                    } 
        
                    function checkForEmpty(obj) { 
        
                        if (obj && obj.value == "") { 
        
                            alert("Code length cannot be empty"); 
        
                            return false; 
        
                        } 
        
                        else return true; 
        
                    } 
        
                    function showHideFieldDispName() 
        
                    { 
        
                        var chkFieldShowName = document.getElementById('<%= chkFieldShowName.ClientID %>'); 
        
                        var txtFieldDispName = document.getElementById('<%= txtFieldDispName.ClientID %>'); 
        
                        if(chkFieldShowName && txtFieldDispName) 
        
                        { 
        
                            if(chkFieldShowName.checked) txtFieldDispName.disabled = false; 
        
                            else txtFieldDispName.disabled = true; 
        
                        } 
        
                    } 
        
            </script> 
        
            <style> 
        
                .CapitaFloatLeft2Column 
        
                { 
        
                    position: relative; 
        
                    float: left; 
        
                    width: 156px; 
        
                } 
        
                .CapitaFloatRight2Column 
        
                { 
        
                    position: relative; 
        
                    float: left; 
        
                    width: 264px; 
        
                } 
        
                .CapitaGroupControlContainer 
        
                { 
        
                    position: relative; 
        
                    width: 420px; 
        
                    height: 34px; 
        
                } 
        
            </style> 
        
            </html>

1 Answer, 1 is accepted

Accepted

answered on 05 Apr 2010, 09:10 AM

height-150-firefox-radeditorq12010.zip

Hi Sekar,

The Height problem is due to a well known issue / bug in the Mozilla / Gecko / Web-Kit (Safari and Chrome) browsers, and not in RadEditor. The browser itself ignores setting any heights smaller than 150px to the IFRAME element.

Here is a small sample that shows the root of the problem:

<table style="height:80px;border:3px solid green">
    <tr style="height:100%">
        <td style="height:100%">
            <iframe style="border: 1px solid red; height:100%" src=""></iframe>
        </td>
    </tr>
</table>

To fix the problem you should set the editor's height once the editor is shown in RadTabStrip. Here is an example:

<telerik:RadTabStrip ID="tabStrip1" runat="server" MultiPageID="multiPage1" ClickSelectedTab="true" OnClientTabSelected="onTabSelected">

<Tabs>

<telerik:RadTab id="tbGeneral" runat="server" Text="General" PageViewID="pgEditSection">

</telerik:RadTab>

<telerik:RadTab id="tbAdvanced" runat="server" Text="Advanced" Visible="false">

</telerik:RadTab>

<telerik:RadTab id="tbValidation" runat="server" Text="Validation" Visible="false">

</telerik:RadTab>

<telerik:RadTab id="tbCondition" runat="server" Text="Condition" Visible="false">

</telerik:RadTab>

<telerik:RadTab id="tbHTML" runat="server" Text="HTML" Visible="false">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

....

<script type="text/javascript">

function onTabSelected(sender, args) {

var selectedTab = args.get_tab().get_text();

if (selectedTab == "General") {

var editors = get_allRadEditors();

for (i = 0; i < editors.length; i++) {

var editor = editors[i];

editor.setSize(editor.get_element().style.width, 100);

editor.get_contentAreaElement().style.height = "40px";

}

function get_allRadEditors() {

var allRadEditors = [];

var allRadControls = $telerik.radControls;

for (var i = 0; i < allRadControls.length; i++) {

var element = allRadControls[i];

if (Telerik.Web.UI.RadEditor && element instanceof Telerik.Web.UI.RadEditor) {

Array.add(allRadEditors, element);

}

return allRadEditors;

}

</script>

<telerik:RadEditor ID="radSectionHeader" EnableResize="false"

ToolsFile="DefaultTools.xml" ToolbarMode="ShowOnFocus"

runat="server" Width="500px" Height="100px">

</telerik:RadEditor>

For your convenience I have attached my test project.

Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadEditor Height not working properly

1 Answer, 1 is accepted