Front end Editor conflict with bootstrap 4

[quickjeff]

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

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]

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]

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]

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. 

[JayGee]

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]

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.

[studioweb]

Having the same issues here with Jquery 3.2.1 / Bootstrap v4.0.0 on PW 3.0.148

[antpre]

Problem still there. Any solution known ?

[TheMick]

Not really a solution, but you can instead load jquery-migrate for editors after jquery:

if ($page->editable()) { echo '<script src="/path-to-js/jquery-migrate-3.3.2.min.js?NoMinify" defer></script>'; }

This way you have at least the full functionality of the current jquery version for the editors, too.

The same problem is discussed here.