Issue with Div tag inside an anchor tag

4 posts, 0 answers
  1. Shashi
    Shashi avatar
    2 posts
    Member since:
    Jul 2015

    Posted 19 Dec 2019 Link to this post

    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.

  2. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 20 Dec 2019 Link to this post

    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.
  3. Shashi
    Shashi avatar
    2 posts
    Member since:
    Jul 2015

    Posted 20 Dec 2019 in reply to Rumen Link to this post

    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. 

  4. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 23 Dec 2019 Link to this post

    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.
Back to Top