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

Editor height issue on iPad

1 Answer 23 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Marja
Top achievements
Rank 1
Marja asked on 25 Jun 2014, 09:20 AM
Hi,

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?

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 27 Jun 2014, 01:03 PM
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">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Underline" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
 
<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);
    }
</script>


Regards,
Ianko
Telerik
 

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.

 
Tags
Editor
Asked by
Marja
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or