Title: JS and CSS issues
Last modified: February 21, 2020

---

# JS and CSS issues

 *  Resolved [dan1982](https://wordpress.org/support/users/dan1982/)
 * (@dan1982)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/)
 * 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](https://wordpress.org/support/users/dan1982/).

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

 *  Plugin Author [Konrad Chmielewski](https://wordpress.org/support/users/hwk-fr/)
 * (@hwk-fr)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/#post-12464707)
 * 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](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](https://wordpress.org/support/users/dan1982/)
 * (@dan1982)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/#post-12464770)
 * 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](https://wordpress.org/support/users/hwk-fr/)
 * (@hwk-fr)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/#post-12465387)
 * You’re welcome!
 * Have a nice day.
 * Regards.
 *  Thread Starter [dan1982](https://wordpress.org/support/users/dan1982/)
 * (@dan1982)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/#post-12490756)
 * 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](https://wordpress.org/support/users/hwk-fr/)
 * (@hwk-fr)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/#post-12507681)
 * 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.

 * ![](https://ps.w.org/acf-extended/assets/icon-256x256.png?rev=2071550)
 * [Advanced Custom Fields: Extended](https://wordpress.org/plugins/acf-extended/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/acf-extended/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/acf-extended/)
 * [Active Topics](https://wordpress.org/support/plugin/acf-extended/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/acf-extended/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/acf-extended/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [js](https://wordpress.org/support/topic-tag/js/)

 * 5 replies
 * 2 participants
 * Last reply from: [Konrad Chmielewski](https://wordpress.org/support/users/hwk-fr/)
 * Last activity: [6 years, 3 months ago](https://wordpress.org/support/topic/js-and-css-issues/#post-12507681)
 * Status: resolved