Editor height issue on iPad

2 posts, 0 answers
  1. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 25 Jun 2014 Link to this post


    In a special scenario, we're using a RadEditor to let the user enter a subject line for sending online emails. We use the editor here because we need the editor toolbar (with some custom made tools) to allow the user to insert some special 'tokens' in that subject line.

    Because obviously we only want one line of text in this scenario, and we want to visually discourage the user to enter more than one line, we use the RadEditor with a height set to only 50px (height="50")

    This small editor displays fine on eg. computers and Android-tablets, but the Apple iPad displays only a very tiny editor. So tiny in fact, that it is impossible to put a cursor in it to start typing.

    Any ideas how to solve this?
  2. Ianko
    Ianko avatar
    1892 posts

    Posted 27 Jun 2014 Link to this post

    Hello Marja,

    I can confirm that this is an unexpected behavior. The content area should be the same size as in other browser/devices.

    This encountered problem is due to failing calculation logic of the iframe element. It appears that under iOS mobile devices the onload event of the iframe is not raised and the content area cannot be correctly resized.

    I logged this issue as a bug report and you can track further task updates with this feedback portal item. As appreciation for this report I am updating your Telerik points.

    I can recommend you using the DIV mode of the RadEditor by setting the ContentAreaMode="Div" proeprty.

    If the DIV mode does not fit your needs, you can use the following workaround:
    <telerik:RadEditor ID="RadEditor1" runat="server" height="50px" OnClientLoad="OnClientLoad">
                <telerik:EditorTool Name="Bold" />
                <telerik:EditorTool Name="Italic" />
                <telerik:EditorTool Name="Underline" />
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            setTimeout(function () {
                var editorIframe = editor.get_contentAreaElement(),
                    originalIframeHeight = editorIframe.offsetHeight,
                    contentCell = editorIframe.parentNode,
                    cellSize = contentCell.offsetHeight,
                    isCellSmaller = (originalIframeHeight - cellSize) > 2;
                if (isCellSmaller) {
                    contentCell.style.height = originalIframeHeight + "px";
            }, 0);


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top