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"
> </
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"
> </
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"
> </
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"
> </
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"
> </
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"
> </
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
>