JS and CSS issues

  • Resolved dan1982

    (@dan1982)


    6 years, 3 months ago

    I love the plugin, but was having issues with the preview option.
    I narrowed it down to Jquery not loading in the admin area (why i cannot be sure), so I enqueued Jquery in the admin area, and this broke Gutenberg, adding Classic editor solved this and I was able to use the flexible content preview.

    However, the CSS files added to the preview options are affecting my admin area css, font style, sizes etc have all changed and it looks odd to the backend. Is this meant to happen?

    If anyone can help or add insight to either issue I would be grateful.

    • This topic was modified 6 years, 3 months ago by dan1982.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    6 years, 3 months ago

    Hello,

    Thanks for the feedback. There’s definitely something wrong if jQuery is not correctly loaded in the admin area. I would suggest to not enqueue jQuery manually, and try to find out what cause this problem before continuing.

    Regarding the CSS for the preview mode, it’s normal that your CSS rules are applied in the admin area, because the style.css files of your layouts are loaded just like any other CSS file.

    In order to not interfere with native WP admin style, you’ll have to target a specific container for the preview mode. There’s two ways to do it:

    – With ACF Extended, all layouts preview are contained in a <div class="-preview"></div> wrapper. So you can just prefix all your CSS styles with .-preview.
    – The second method is to create your own CSS class inside the template.php file as described in this tutorial: https://www.acf-extended.com/post/flexible-content-dynamic-layout-preview. Once you’ve setup your own css class wrapper, you’ll have to prefix your CSS rules.

    Hope it helps 🙂

    Have a nice day!

    Regards.

    Thread Starter dan1982

    (@dan1982)

    6 years, 3 months ago

    Ok thank you. I assumed the Jquery issue was a template problem, but thanks for clarify that I wasn’t losing it with the CSS issue.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    6 years, 3 months ago

    You’re welcome!

    Have a nice day.

    Regards.

    Thread Starter dan1982

    (@dan1982)

    6 years, 3 months ago

    If anyone is having a similar problem. I discovered that the problem wasn’t the Jquery itself, or ACF-extended but the fact that I had errors in my own compiled js code.
    I found errors in the console, which were ‘cannot read property ‘fn’ of undefined’.
    This was stopping all the code below it from working, the actually reason for this was that I had Bootstrap-bundle.js and some of the things inside of it, aka popper.js, modal.js etc, which are present in bundle and the two copies were conflicting.

    Needless to say other wont be quite so specific, but making sure that no errors in your own Javascript file.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    6 years, 3 months ago

    Hello,

    I’m glad to hear that you resolved your JS problem. Thanks for the report about bootstrap-bundle.js 🙂

    Regards.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘JS and CSS issues’ is closed to new replies.

Tags