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:
- Has anyone else faced a similar problem with nested elements in the HTM/WYSIWYG widget on Docebo?
- 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>
