Skip to main content

Hi all, 

I’m experiencing an issue with the HTMLL/WYSIWYG page widget and I’m hoping that someone here might have come across it/resolved it. 

The Problem
When nesting block elements (<div>) inside inline elements (<a>), the editor seems to "auto-correct" the structure upon saving, leading to a disrupted and redundant layout.

Original structure:

<a href="#">
    <div></div>
    <div></div>
</a>

Becomes:

<a href="#"></a>
<div><a href="#"></a></div>
<a href="#"></a>
<div><a href="#"></a></div>


I’ve managed to find a work around, however it’s impacting the intended functionality and appearance of the content.

I reached out to helpdesk regarding the issue but they said they aren’t HTML experts and suggested consulting the community. 

 

Seeking Insights:

  1. Has anyone else faced a similar problem with nested elements in the HTM/WYSIWYG widget on Docebo?
     
  2. Any known workarounds or fixes? I suspect this might be related to the editor adhering to older HTML standards or attempting an auto-correction.

I’ve pasded the full code for review below

Thanks for your time!

<!--ORIGINAL CODE-->
<div class="pd-box-button">
    <div class="pd-button OM">
        <a href="/pages/57/operational-management" class="pd-link-wrap">
            <div class="pd-pages"></div>
            <div class="pd-background"></div>
        </a>
    </div>
</div>


<!--ALTERED CODE-->
<div class="pd-box-button">
    <div class="pd-button OM">
        <a href="/pages/57/operational-management" class="pd-link-wrap">
            </a><div class="pd-pages"><a href="/pages/57/operational-management" class="pd-link-wrap"></a></div><a href="/pages/57/operational-management" class="pd-link-wrap">
            </a><div class="pd-background"><a href="/pages/57/operational-management" class="pd-link-wrap"></a></div><a href="/pages/57/operational-management" class="pd-link-wrap">
        </a>
    </div>
</div>


 

 

@BrentDeayton I had this issue and the workaround that I used, was to replace DIVs inside the A element with SPAN elements and apply styles to those SPANs.

<a href="#">
    <span></span>
    <span></span>
</a>

So, your code would look like this:

<div class="pd-box-button">
    <div class="pd-button OM">
        <a href="/pages/57/operational-management" class="pd-link-wrap">
            <span class="pd-pages"></span>
            <span class="pd-background"></span>
        </a>
    </div>
</div>

 

Alex has the best workaround for this scenario, something to keep in mind with the wysiwyg editor, even in html mode, it is going to force itself and its rules on you, that means some tags being stripped out, and other times duplicating in surrounding cases like yours. Fiddling around with types, or being ok with multiple link wrappers are usually the only resolves.

Thanks @alekwo, great work around!

Thanks @alekwo for this workaround, I was also struggling with same since a few days.

Reply


Terms & ConditionsCookie settings