RadEditor Height not working properly

2 posts, 1 answers
  1. Sekar
    Sekar avatar
    15 posts
    Member since:
    May 2008

    Posted 02 Apr 2010 Link to this post

    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> 
     


  2. Answer
    Rumen
    Admin
    Rumen avatar
    14166 posts

    Posted 05 Apr 2010 Link to this post

    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.
Back to Top