This is a migrated thread and some comments may be shown as answers.
Issue with Div tag inside an anchor tag
3 Answers 3 Views
This is a migrated thread and some comments may be shown as answers.
Shashi
Top achievements
Rank 1
Shashi asked on 19 Dec 2019, 11:18 PM

Hello,

Currently we are using the below Telerik editor and we have a Div tag inside an anchor tag and noticed the when we switch from html to design it completely changes the html structure. Does Telerik have a fix for this issue since this is a valid html

https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Expected HTML
<div class="image-container"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"></a><div class="icon-zoom"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"> test</a></div></div>

Telerik is change it to , as you notice it adds additional anchor tags

<div class="image-container"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
</a>
<div class="icon-zoom"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"> test</a></div>
</div>

Please advise how this can be fixed.

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Dec 2019, 10:36 AM

Hi Shashi,

I examined the provided markup and noticed that the original and the resulted markup are identical, after excluding the new lines.

Nevertheless, can you please disable the ConvertToXhtml filter and test the scenario once again?

Update: You can also replace the div element with span element for the font icons. The problem does not happen with span elements:

<div class="image-container">
<a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
<span class="icon-zoom"></span>
test</a>
</div>

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Shashi
Top achievements
Rank 1
answered on 20 Dec 2019, 06:45 PM

Sorry you are right :

Below is the intended HTML

<div class="image-container">
<a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
<div class="icon-zoom"></div>
test</a>
</div>

Telerik is change it to , as you notice it adds additional anchor tags

<div class="image-container"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
</a>
<div class="icon-zoom"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"> test</a></div>
</div>

 

We are using Sitecore and Span will work for new items but for existing items if they edit any existing item the problem will resurface. 

disable the ConvertToXhtml filter  worked, if we disable ConvertToXhtml filter   what will be the impact and functionality we will lose. 

0
Rumen
Telerik team
answered on 23 Dec 2019, 11:37 AM

Hi Sashi,

The ConvertToXhtml filter converts the HTML from the editor content area to XHTML. When this filter is disabled the editor leaves the browser to validate the content. The rich text editing engine of the modern browsers does the validation well.

The other solution is to replace the inner div with the font icon class with a span element:

 

<div class="image-container">
<a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
<span class="icon-zoom"></span>
test</a>
</div>

 

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Shashi
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Shashi
Top achievements
Rank 1
Share this question
or