In IE11, the 'Insert Code Snippet' command mixes up HTML, if fire two or more times.

6 posts, 0 answers
  1. Oleg
    Oleg avatar
    5 posts
    Member since:
    May 2014

    Posted 06 Oct 2014 Link to this post

    Environment: Internet Explorer 11 (11.0.12) with Document Mode Edge (Default), Telerik UI for ASP.NET AJAX Library Q2 2014 version 2014.2.724

    ​Steps to reproduce:

    1. In Visual Studio, create a new ASP.NET Web Application using the Empty template and the Web Forms as a core reference.
    2. Add references to Telerik.Web.UI and Telerik.Web.UI.Skins assemblies.
    3. Add the Default.aspx Web Forms item into the root of the project.
    4. In Default.aspx page, add the following HTML:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><br>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html>
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
    </head>
    <body>
      <form id="form1" runat="server">   
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadEditor ID="RadEditor1" runat="server">
          <Snippets>
            <telerik:EditorSnippet Name="2 Column Div Layout">           
              <!-- Row 1 -->
              <div class="row">
               <div class="span7">
                 <div class="row">
                  <div class="span4">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                    </div>
                  <div class="span3">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                    </div>
                 </div>
               </div>
              </div>
              <!-- Pad -->
              <div class="pad15"></div>
              <!-- Row 2 -->
              <div class="row">
               <div class="span7">
                 <div class="row">
                  <div class="span4">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                  </div>
                  <div class="span3">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                  </div>
                 </div>
               </div>
              </div>
            </telerik:EditorSnippet>
          </Snippets>
        </telerik:RadEditor>
      </form>
    </body>
    </html>

    5. Build and run the project using IE 11.
    6. In the Editor control click the Insert Code Snippet button and select the 2 Column Div Layout code snippet.
    7. Switch to the HTML tab and then back to Design one.
    8. Click the Insert Code Snippet button and select the 2 Column Div Layout code snippet one more time.

    Actual Result:

    <!-- Row 1 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    <p>
    <!-- Row 1 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    </div>
    </div>
    </div>
    </div>
    </p>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    <p>
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span3">
    </div>
    </div>
    </div>
    </div>
    <!-- Pad -->
    <div class="pad15">&nbsp;</div>
    <!-- Row 2 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    </div>
    </div>
    </div>
    </div>
    </p>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
    <p>
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span3">
    </div>
    </div>
    </div>
    </div>
    Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    <div class="span3">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    </div>
    </div>
    </div>
    <!-- Pad -->
    <div class="pad15">&nbsp;</div>
    <!-- Row 2 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    <div class="span3">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    </div>
    </div>
    </div>

    Expected Result:

    <!-- Row 1 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    <div class="span3">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    </div>
    </div>
    </div>
    <!-- Pad -->
    <div class="pad15">&nbsp;</div>
    <!-- Row 2 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
    </div>
    <div class="span3">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
    </div>
    </div>
    </div>
    </div>
    <!-- Row 1 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    <div class="span3">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
    </div>
    </div>
    </div>
    </div>
    <!-- Pad -->
    <div class="pad15">&nbsp;</div>
    <!-- Row 2 -->
    <div class="row">
    <div class="span7">
    <div class="row">
    <div class="span4">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
    </div>
    <div class="span3">
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
    </div>
    </div>
    </div>
    </div>

    Note:
    If you skip step #7 the Actual Result would be different, but still incorrect:
    <!-- Row 1 --><br>
    <div class="row"><br>
    <div class="span7"><br>
    <div class="row"><br>
    <div class="span4"><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et.</p><br>
    </div><br>
    <div class="span3"><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et.</p><br>
    </div><br>
    </div><br>
    </div><br>
    </div><br>
    <!-- Pad --><br>
    <div class="pad15">&nbsp;</div><br>
    <!-- Row 2 --><br>
    <div class="row"><br>
    <div class="span7"><br>
    <div class="row"><br>
    <div class="span4"><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et. </p><br>
    </div><br>
    <div class="span3"><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et.<br>
    <!-- Row 1 --><br>
    <div class="row"><br>
    <div class="span7"><br>
    <div class="row"><br>
    <div class="span4"><br>
    </div><br>
    </div><br>
    </div><br>
    </div><br>
    </p><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et.</p><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et.</p><br>
    <p><br>
    <div class="row"><br>
    <div class="span7"><br>
    <div class="row"><br>
    <div class="span3"><br>
    </div><br>
    </div><br>
    </div><br>
    </div><br>
    <!-- Pad --><br>
    <div class="pad15">&nbsp;</div><br>
    <!-- Row 2 --><br>
    <div class="row"><br>
    <div class="span7"><br>
    <div class="row"><br>
    <div class="span4"><br>
    </div><br>
    </div><br>
    </div><br>
    </div><br>
    </p><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et. </p><br>
    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
    suspendisse ac nec et. </p><br>
    </div><br>
    </div><br>
    </div><br>
    </div>

  2. Oleg
    Oleg avatar
    5 posts
    Member since:
    May 2014

    Posted 06 Oct 2014 in reply to Oleg Link to this post

    The issue does not reproduce using Google Chrome 37.0.2062.124 or Mozilla Firefox 32.0.3 on Windows 8.1 Update.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 09 Oct 2014 Link to this post

    Hi Oleg,

    The described problem is actually reproducible only under IE11 no matter the Windows version.

    What happens is that IE11 selects the first paragraph found in the div elements. This appears to be a behavior encountered only with the provided markup example and I am not aware why this behavior is implemented in IE11.

    You can workaround this side effect by adding a zero-width space character above the code snippet:
    <telerik:RadEditor ID="RadEditor1" runat="server">
        <Snippets>
            <telerik:EditorSnippet Name="2 Column Div Layout">  
                ​&#8203;
                <!-- Row 1 -->
                <div class="row">
                <div class="span7">
                    <div class="row">
                    <div class="span4">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                    </div>
                    <div class="span3">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                    </div>
                    </div>
                </div>
                </div>
                <!-- Pad -->
                <div class="pad15"></div>
                <!-- Row 2 -->
                <div class="row">
                <div class="span7">
                    <div class="row">
                    <div class="span4">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                    </div>
                    <div class="span3">
                    <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                    </div>
                    </div>
                </div>
                </div>
            </telerik:EditorSnippet>
        </Snippets>
    </telerik:RadEditor>

    Due to this character the IE11 succesfully can select the text node above the code snippet when needed. Without trying to find the first nested paragraph.

    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.

     
  5. Oleg
    Oleg avatar
    5 posts
    Member since:
    May 2014

    Posted 09 Oct 2014 in reply to Ianko Link to this post

    Hi Ianko,

    Thank you for the update.

    The ​zero-width space character (&#8203;) does a trick for the main scenario. But, it still mixes HTML if you skip step #7 and insert the ode snippet two time staying in the Design tab.

    Do I understand you correctly that this is IE 11 issue rather than Telerik's Editor control?

    Best Wishes, Oleg
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Oct 2014 Link to this post

    Hello Oleg,

    I cannot firmly define this behavior as a problem. When it comes to text editing in web environment using DIV and P elements causes some contradictory behavior with HTML editing.

    In this case, DIV elements are used as wrappers for the P ones, which is entirely support and available in HTML editing. On other hand, when it comes to text editing, the DIV and P elements are considered as new line separators and since the P is the firmly considered text line, IE11 decides to place the cursor in it in advance.

    Due to this behavior, additional content inserted is getting inside this P element. Because of that, the initial HTML content appears incorrect - P elements are nested inside P elements. Thus, the browser detects incompatible HTML and tries to modify it to a more-reliable one.

    All these circumstances cause the encountered behavior, and all of them are actually designed to improve editing behavior when editable element is used under IE. Therefore, I am unable to define this as a bug or browser-related issue. It is more a matter that should be taken into account when HTML is automatically inserted in the iframe's editable content.

    The main scenario is handled accurately because the snippet enables the IE to be able to select a text element at the begging of the text. Absolutely the same approach will cure the second behavior, because adding a text element at the end, will enable the browser, and the user to place the cursor right after the DIV elements, and respectively after the entire snippet. 

    As a result, you can try this snippet and examine if there are any further concerns on the matter:
    ​​  ​&#8203;
     <!-- Row 1 -->
     <div class="row">
     <div class="span7">
         <div class="row">
         <div class="span4">
         <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
         </div>
         <div class="span3">
         <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
         </div>
         </div>
     </div>
     </div>
     <!-- Pad -->
     <div class="pad15"></div>
     <!-- Row 2 -->
     <div class="row">
     <div class="span7">
         <div class="row">
         <div class="span4">
         <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
         </div>
         <div class="span3">
         <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
         </div>
         </div>
     </div>
     </div>
    ​​  &#8203;



    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.

     
  7. Oleg
    Oleg avatar
    5 posts
    Member since:
    May 2014

    Posted 10 Oct 2014 in reply to Ianko Link to this post

    Hi Ianko,

    Thank you for detailed explanation and the workaround. It works well in IE 11 now.

    Best Wishes, Oleg
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017