Front end Editor conflict with bootstrap 4

[quickjeff 62]

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? 

[Tom. 604]

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). 

[quickjeff 62]

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). 

 

[matjazp 409]

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

[quickjeff 62]

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. 

[Guy Incognito 39]

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>';
}	
?>

 

[zoeck 91]

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.