RadEditor with large text display problems on iOS devices

[Darren]

On our website we are using the RadEditor control to allow site visitors to enter rich formatted text.

If somebody visits our site using safari on an iOS device, the RadEditor control does not display correctly.If you look at the image.png attachment, you can see how the editor text is being overlayed over all controls on the page, instead of expanding and pushing the controls down the page.

I was using 2012 Q1, and upgraded to 2013 Q1, and the issue remains.
The iOS device i am using is running the latest vesion 6.1.3

I am not doing anything special with the control on the page:

<radE:RadEditor id=fldAssessmentPlanningInformation Runat="server"  Content="<%# this.CurrentPlanningInfo.AssessmentPlanningInformationText %>" ToolsFile="~/Resources/RadControls/Editor/planAndEvidence.xml"></radE:RadEditor>

Obviously, using a desktop browser, IE, Chrome, Safari, Firefox, the RadEditor control displayes correctly.

I installed chrome for iOS, and it has the same display image problems.

In the image attached it is using html, but even if you enter plain text, the control is not being displayed correctly.

While doing various testing, I disabled javascript on safari. Then the controls all displayed correctly except no text was displayed, so it leaves me thinking that there is an issue in how the controls to be displayed are being built up.

If anybody has come across this and has a solution, greatly appreciated.

Darren

[Danail Vasilev]

Hello Darren,

We are aware of this issue - when a larger image or a content is inserted in the RadEditor, no scrollers appears and the content is resized. The unexpected behavior is caused due to a scrolling limitation of the iframe under iPAD (the editor uses iframe for its render).

The issue has already been logged as a PITS item here, so that you can monitor and comment on it. For the time being you can raise the priority of the item by voting on it.

Kind regards,
Danail Vasilev
the Telerik team

[Darren]

That may be the case, but the following javascript hack

<script language="javascript" type="text/javascript">
$(function () {
        var ctrl = $("#<% =fldAssessmentPlanningInformation.ClientID %>");
        var ctrlwrapper = $("#<% =fldAssessmentPlanningInformation.ClientID %>Wrapper");
        if ( ctrl.height() < ctrlwrapper.height() )
            ctrl.height(ctrlwrapper.height())
</script>

When I test this on my ipad, the above hack resizes the height of the iframe correcly in my opinion, I have not done anything with width, I have only been looking at height.

I also tried the following:

<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
<radE:RadEditor id=fldAssessmentPlanningInformation Runat="server"  Content="<%# PrepareHtmlForDisplay(this.CurrentPlanningInfo.AssessmentPlanningInformationText) %>" ToolsFile="~/Resources/RadControls/Editor/planAndEvidence.xml"></radE:RadEditor>
</div>

and that has also made the page more responsive.


If i can put hacks like these together, I am struggling to understand why a company with the resources that Telerik has, you are still having issues with this especially since the ipad2 has been out since 2011.

[Danail Vasilev]

Hello Darren,

The reason for not fixing this issue is due to the schedule of our developers that works on RadEditor's tasks with higher priority. For example these are the improvements on the indent/outdent commands, insert list command, alignment commands(left, right, center, justify), etc. You will be able to find the full list of the feature requests, fixes and improvements in the RadEditor for the upcoming Q2 2013 Beta (scheduled for the middle of this week) in the release notes that will be published.

You can also consider using the client-side function of the RadEditor setSize in order to set the height of the wrapper to the RadEditor. For example:
ASPX:

<div id="wrapper" style="height: 500px; border: 1px solid red; overflow: hidden">
    <telerik:RadEditor ID="RadEditor1" Height="300px" runat="server">
    </telerik:RadEditor>
</div>

JavaScript:

<script language="javascript" type="text/javascript">
    function pageLoad() {
        var $ = $telerik.$;
        var editor = $find("<% =RadEditor1.ClientID %>"),
            wrapperHeight = parseInt($("#wrapper").height(), 10);
        editor.setSize($(editor.get_element()).width(), wrapperHeight);
    };
</script>

Kind regards,
Danail Vasilev
the Telerik team