Environment: Telerik UI for ASP.NET AJAX Library Q2 2014 version 2014.2.724, Internet Explorer 11 or FireFox 32, Chrome 38.
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:
5. Build and run the project using Internet Explorer 11 or Firefox 32 or Chrome 38.
6. In the Design tab, click the Entre key. The <p> </p> <p> </p> HTML is inserted.
7. In the Design tab, click the Insert Code Snippet button and select the 2 Column Div Layout code snippet.
8. Switch to the HTML tab to see the HTML.
Actual Result:
The code snipped is inserted inside the second <p> element. As a result, the code snippet HTML is changed.
Expected Result:
The code snipped must be inserted after the <p> </p> <p> </p> HTML without any changes.
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" %><%@ 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 Internet Explorer 11 or Firefox 32 or Chrome 38.
6. In the Design tab, click the Entre key. The <p> </p> <p> </p> HTML is inserted.
7. In the Design tab, click the Insert Code Snippet button and select the 2 Column Div Layout code snippet.
8. Switch to the HTML tab to see the HTML.
Actual Result:
The code snipped is inserted inside the second <p> element. As a result, the code snippet HTML is changed.
<p> </p><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>Expected Result:
The code snipped must be inserted after the <p> </p> <p> </p> HTML without any changes.
<p> </p><p> </p><!-- 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>1 Answer, 1 is accepted
0
Hi,
Thank you for the detailed description.
I have investigated the issue and found out that it is caused by RadEditor's functionality which should fix the nested paragraphs.
There are a few ways to prevent this behavior.
- Make sure that the EditorSnippet (which contains paragraphs) is not inserted into another paragraph. This can be achieved by using NewLineMode Div instead of P so the RadEditor will not generate paragraphs.
- Replace the paragraphs with DIV elements in the EditorSnippet.
- Disable this functionality by using the following code snippet:
<telerik:RadEditor ID="RadEditor1" runat="server"> <Snippets> <telerik:EditorSnippet Name="2 Column Div Layout"> <!-- Row 1 --> .... </telerik:EditorSnippet> </Snippets></telerik:RadEditor><script type="text/javascript"> Telerik.Web.UI.Editor.NestedElementsFix.prototype.applyFix = function () { }</script>Here is the feedback item, where you can track the issue's status and vote for it.
I hope this helps.
Regards,
Nikolay
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.