Why DJ-Catalog2 popup does not work with Helix 3 Joomshaper template?

edited February 6 in DJ-Catalog2
DJ-Catalog2 popup does not work with Helix 3 template by Joomshaper. Precisely, after click on "Add to quote" we don't see popup window. Only gray screen. Why is this? Is there conflict bootstrap version?

Best Answer

  • I found this:
    in /helix3/templates/shaper_helix3/css/bootstrap.min.css there are: .hide {display:none !important}. If commented this, then the pop-up window works.

Answers

  • Hi,

    If your template uses it's own version of Bootstrap or the styles are not fully compatible with Bootstrap, then you might experience similar issues.
    If you need our help, please contact us via help-desk and provide the link to your website.
  • I am having the same issue. I have absolutely no idea how to fix this and I am fairly new to joomla. I am using Helix 3 and previously they were working well together.
  • Hi, Please contact us via helpdesk so we can check it on your site and find the solution.
  • Hi !
    Same issue here with Helix3.

    What was the workaround ?
  • Hi,

    You might as well ask why core Joomla! pop-ups don't work on those templates. It's not only the pop-up in DJ-Catalog2 that doesn't work.

    Layouts and UI elements in Joomla! as well in DJ-Catalog2 are all based Boostrap framework ver. 2.3.2 (slightly modified by Joomla! developers). Templates you mentioned, on the other hand, are based on Bootstrap ver. 3 which is not fully compatible with older version. And one of the most common culprits is that modal* popups work quite different in those versions.

    Of course using Bootstrap 3 isn't bad, but in my opinion, if a specific template uses different standards than those which were introduced by core platform (i.e. Joomla!), then at least it should introduce some kind of backward compatibility with the platform. In other words, templates based on Bootstrap 3 should be made compatible with Bootstrap 2- not the other way around.

    As for the workaround, it usually helps if you compare the CSS code responsible for displaying modal elements in your template and, for example, default Joomla! template - Protostar. The code you should focus refers to classes such as .modal, .modal-body, .modal-overlay, .modal-backdrop, etc.
    The another common problem is the fact that modals are being simply hidden with .hide helper class. But it also depends on the template.

    *)
    http://getbootstrap.com/2.3.2/javascript.html#modals
    http://bootstrapdocs.com/v3.0.3/docs/javascript/#modals

    P. S. For for detailed information about specific issue with your template, please contact us via help-desk and send a link to your website.

    Kind regards,
    Michał Olczyk
  • Update: If you are 100% sure that your template uses Bootstrap v. 3 and the pop-up doesn't work, usually following solution should fix it.

    Below you will find a CSS code that needs to added to one of your template files, although it should be one of the last files. That's because the code should override invalid Bootstrap declarations.
    Most of templates on the market have either custom.css or custom.less file into which you can add your own CSS code. If not, they usually provide some other way to add custom code. This should be the perfect place to add following code:

    div.modal.hide.in {
    display: block !important;
    }
    div.modal {
    position: fixed;
    top: 5%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 1050;
    width: 80%;
    margin-left: -40%;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    background-clip: padding-box;
    outline: none;
    }
    div.modal.fade {
    transition: opacity .3s linear, top .3s ease-out;
    top: -25%;
    }
    div.modal.fade.in {
    top: 5%;
    }
    div.modal .modal-backdrop {
    display: none;
    }
  • 01K01K
    edited March 18
    Moreover, with Helix Ultimate the modals doesn't close...
    Once producer's modal(or any other) is opened it contains different classes: "modal hide fade show", while with elder templates it was: "modal hide fade in".
    Any workaround with custom jQuery to make close button work with Helix Ultimate?
  • 01K said:

    Moreover, with Helix Ultimate the modals doesn't close...
    Once producer's modal(or any other) is opened it contains different classes: "modal hide fade show", while with elder templates it was: "modal hide fade in".
    Any workaround with custom jQuery to make close button work with Helix Ultimate?

    That's interesting. Could you share a link to a page where I could see that?

    In Bootstrap 2.3 the hidden container has "modal hide fade" classes. When it's opened the classes are "modal hide fade in" and there's an extra in-line CSS added (display: block) to the container. You can see how it works in J! back-end, for example in Batch processing of menu items are articles.
Sign In or Register to comment.