unable to deselect table on iOS

5 posts, 0 answers
  1. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 02 May 2014 Link to this post

    The problem can be seen on the demo editor.

    On iOS, tap the "Insert Table" toolbar button to add a table to the editor content window,
    Notice that the new table is 'selected',
    If you tap somewhere else in the content window, the table remains selected

    In a desktop browser, the table will become deselected as soon as you click elsewhere in the content window.  On Android, the table becomes deselected as soon as you tap elsewhere in the content window.

    Can I get a solution to this problem?

    Thanks,
    Trevor.
  2. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 05 May 2014 in reply to Trevor Link to this post

    Can I get a response to this please?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 07 May 2014 Link to this post

    Hello Trevor,

    I was able to reproduce the behavior described, only when I click in the editor area to the right of the table.
    If you click in the area below or above the table, the cursor moves and the first cell of the table is deselected. I have attached a short video, showing that behavior on an iOS 7.1 iPad Safari.
    The same behavior is observed when there is additional text content as well.

    There is a difference in the way Android and iOS handle taps position. You may experience it in the address bar of iOS Safari and Android Chrome - in Safari when you tap inside a word in the address bar, the cursor moves either before or after that word. In Android Chrome, the cursor would be placed at the exact position tapped. These native specifics lead to different experience in the two mobile OS browsers.

    If you are observing RadEditor behavior other than the one described above, could you attach a short video that demonstrates it to show us the experience on your side?

    Regards,
    Dimitar
    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.

     
  5. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 07 May 2014 in reply to Dimitar Link to this post

    Hello,

    The issue is not difficult to reproduce. I'll attach screenshots that demonstrate the problem using the Telerik demo editor.

    steps:

    1. tap somewhere in the content area (screen1)
    2. use the toolbar button to insert a table (screen2)
    3. tap elsewhere in the content area - notice the cursor - notice the table is still selected (screen3)
    4. tap elsewhere in the content area - notice the cursor - notice the table is still selected (screen4)
    5. tap elsewhere in the content area - notice the cursor - notice the table is still selected (screen5)
    6. double-tap a word to select it - notice the table is still selected (screen6)

    to deselect the table, you can switch to HTML mode then back to Design mode.

    Please let me know what can be done to correct this problem. Thank you.
  6. Joana
    Admin
    Joana avatar
    70 posts

    Posted 08 May 2014 Link to this post

    Hello Trevor,

    RadEditor's content area is an editable iframe which uses the Rich Text Editing engine of the used browser. There are some limitations with the usage of iframe in Safari like scrolling. Regarding the issue with the selection of tables, we have logged it in our bug tracking system for improvement.

    In the meantime, we have prepared you the following workaround:

    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"  OnClientCommandExecuted="OnClientCommandExecuted">
    </telerik:RadEditor>
    <script type="text/javascript">
                function OnClientLoad(editor, args) {
                    if ($telerik.isMobileSafari) {
                        var element = document.all ? editor.get_document().body : editor.get_document();
                        $telerik.addExternalHandler(element, "click", function (e) {
                            if (e.target.nodeName != "TD" && Telerik.Web.UI.Editor.Utils.getElementParentByTag(e.target, "TABLE")) {
                                var editorWindow = editor.get_contentWindow();
                                clearSelection(editorWindow);
                            }
                        });
                    }
                }
                function OnClientCommandExecuted(editor, args) {
                    if ($telerik.isMobileSafari) {
                        if (editor.getSelectedElement().nodeName == "TD") {
                            var editorWindow = editor.get_contentWindow();
                             clearSelection(editorWindow);
                        }
                    }
                }
     
                function clearSelection(object) {
                    if (object.getSelection) {
                        object.getSelection().removeAllRanges();
                    }
                }
     
             
            </script>


    Regards,
    Joana
    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017