Jump to content
quickjeff

Front end Editor conflict with bootstrap 4

Recommended Posts

Hey guys I am using the front end editor for people to be able to edit a custom page they created. However, bootstrap 4 is being used as the framework and it seems to conflict with the editor. Any suggestions? 

Share this post


Link to post
Share on other sites
3 hours ago, quickjeff said:

Hey guys I am using the front end editor for people to be able to edit a custom page they created. However, bootstrap 4 is being used as the framework and it seems to conflict with the editor. Any suggestions? 

The editor should be "namespaced". Are you able to provide a screenshot of the conflict (with inspect element on the issue). 

  • Like 2

Share this post


Link to post
Share on other sites
14 hours ago, Tom. said:

The editor should be "namespaced". Are you able to provide a screenshot of the conflict (with inspect element on the issue). 

 

Screen Shot 2018-08-24 at 6.35.07 PM.png

Share this post


Link to post
Share on other sites

What PW version? There have been some updates to PageFrontEdit a few months ago. It also looks like jQuery is not loaded before other scripts. PageFrontEdit doesn't play well with Jquery 3 used on the frontend. See https://github.com/processwire/processwire-issues/issues/609 and https://github.com/processwire/processwire-issues/issues/574

  • Like 1

Share this post


Link to post
Share on other sites
On 8/25/2018 at 3:26 AM, matjazp said:

What PW version? There have been some updates to PageFrontEdit a few months ago. It also looks like jQuery is not loaded before other scripts. PageFrontEdit doesn't play well with Jquery 3 used on the frontend. See https://github.com/processwire/processwire-issues/issues/609 and https://github.com/processwire/processwire-issues/issues/574

Using latest version of PW and loading the bootstrap 4 scripts in top and bottom. I tested both ways and it doesnt work. I think its the .slim.min.js file thats breaking things. However this is needed for the toggle drop down and other menu/navigation drop downs in Bootstrap. 

Share this post


Link to post
Share on other sites

Can confirm we've run into this same issue with the latest Bootstrap, latest PW and latest jQuery. We're currently doing this to ensure latest jQuery for the public and the compatible older version for editors.

<?php
//Load older version of jQuery for front end editor
if ($user->isLoggedin()) {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>';
} else {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>';
}	
?>

 

  • Like 2

Share this post


Link to post
Share on other sites
On 10/3/2018 at 8:59 PM, Guy Incognito said:

Can confirm we've run into this same issue with the latest Bootstrap, latest PW and latest jQuery. We're currently doing this to ensure latest jQuery for the public and the compatible older version for editors.

But this is only a workaround... we need a pw fix here... 😞 

It makes no sense to use an old version permanently.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...