List styling issue in WYSIWYG ACF field

[yankiara]

** Cwicly Plugin version: 1.2.9.5.8.3 **

Hi,

In WYSIWYG ACF field, list bullets are hidden because of some 0-padding from Cwicly base.css:

[Araminta]

Hi @yankiara,

Thank you for taking the time to report this!

I have been able to reproduce this issue on my end and can confirm it is a bug.​
Please bear with us while we find a fix for this.​

Apologies for the inconvenience.​

[Wolfgang]

Hey there,

not sure if this bug has already been adressed. On my end it still exists.

Since the content is loaded in an iframe i found it quite difficult to style the UL Element so that the bullet points are shown again.

There’s probably a much easier way than this, but since I’m not an expert in CSS and I really was too lazy to put too much effort into this, I’ve developed a quick script which fixes that problem. Please, if anyone has an easier solution I would be happy to learn from you (it feels like a huge overkill the way I’m doing it :-D):

Step 1: Add a Class to your wysiwyg field (you can name it anything, in my example it is .wysiwyg-acf)

Step 2: Add the following script to your Backend (you can do so by using a plugin like WPCodeBox for example):

document.addEventListener("DOMContentLoaded", loadStylesWhenACFWysiwygEditorIsReady());

function loadStylesWhenACFWysiwygEditorIsReady(){
    if(!document.querySelector('.wysiwyg-acf')) return; // stop when no editor is on the page! 
    let observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes) {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === 1) {
                        // ADD THE CLASS .WYSIWYG-ACF to your ACF-EDITOR under "presentation -> class"
                        if (node.matches(".wysiwyg-acf iframe")) {
                            let iframe = node;
                            let doc =
                                iframe.contentDocument ||
                                iframe.contentWindow.document;
                            let newStyle = doc.createElement("style");
                            doc.head.append(newStyle);
                            newStyle.innerHTML = "ul { padding-left: 24px; }";
                        }
                    }
                });
            }
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });
}

Make sure to render the script only in the backend-area of your WP-Installation:

Again: That feels like a total overkill, so if anyone has a better solution, please share it with us!

Cheers
Wolfgang