Fix pop-up conflict between Joobi and Gantry 5

3 years 1 week ago - 2 years 6 months ago #4789 by Grzegorz Svoboda
Fix pop-up conflict between Joobi and Gantry 5 was created by Grzegorz Svoboda
There is a known conflict between Joobi and Gantry 5 template which result to an ugly looking pop-up or modal in Joobi store front.

The problem is caused by a modal class that has been called twice in the same page.

1. Joobi bootstrap.min.css (Joobi)
2. bootstrap-gantry.css (Gantry)

To fix the problem:

Via FTP;

1. root/template/[your-gantry-template]/custom
2. create a new directory called scss
3. inside scss folder, create a new file and call it custom.scss
4. add this code into your newly created file
/* For Model fix */
.modal-content {
    border: medium none;
    box-shadow: none;
div.modal {box-shadow: none;border: medium none;background-color: transparent;}
.gantry.contentpane.modal #g-page-surround {
    background: transparent none repeat scroll 0 0;
    box-shadow: none;
    overflow: visible;
#wzpOpUp.modal {
	width: 100%;
	margin-left: 0;
	left: 0;
#wzpOpUp .modal-body {
	overflow-y: hidden;
/* end model fix */

5. save the file
6. go to root/template/[your-gantry-template]/custom/css-compiled and Empty it

7. Go visit the page with modal / pop-up issue within Joobi page and it should work.

You can freely update your Joobi Apps and Gantry template without being overwritten.

Attachment not found

Please see the documentation before posting.

Hey, if we helped you, we'd be grateful if you let people know.

Joomla Extensions Directory

This image is hidden for guests.
Please log in or register to see it.

Please Log in or Create an account to join the conversation.

Moderators: Cheryl SabaritaGrzegorz SvobodaJordanJomel