Topic: popower with unsafe html
Expected behavior I need help to use unsafe html in popover.
Actual behavior It shows an empty popover even if sanitize="false"
Resources (screenshots, code snippets etc.)
<!-- popover HTML -->
<a href="#"
data-mdb-popover-init
data-mdb-html="true"
data-mdb-sanitize="false"
data-mdb-title="<form>test</form>"
data-mdb-content="<form>test</form>">
test
</a>
I found this workaround
<a id="popoverTrigger" >Test</a> <script> const trigger =document.getElementById('popoverTrigger'); const popover = new mdb.Popover(trigger, {
html: true, sanitize: false, title: '<form>test</form>', content: '<form>test</form>' });</script>
Also this works too:
<script>
document.addEventListener('DOMContentLoaded', function () {
const popovers = document.querySelectorAll('[data-mdb-popover-init][data-mdb-sanitize="false"]');
popovers.forEach(el => {
const instance = mdb.Popover.getInstance(el);
if (instance) {
instance._config.sanitize = false;
instance.update();
}
});
}); </script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: PC
- Browser: Chrome
- OS: W11
- Provided sample code: No
- Provided link: No