how to solve filemanager and bootstrap tabs conflict

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.

Apr 18, 2016

By WillemAnchor for Developers

Edit

Problem:

When using the Filemanager within one of your tabs, it can occur that the filemanager popup menu won't close or will still be triggered on another tab. This can happens because bootstrap prevents further event handling when you change tabs, and also because the filemanager menu has a very high z-index and is also a direct child from body.

Solution:

Add this bit of javascript to your form:

    $(document).ready(function () {
        $('#ccm-block-form .nav-tabs a').on('click' ,function() {
            $('#ccm-block-form').trigger('click');
        });
    })

It will be triggered when one clicks on another tab and then triggers a 'click' event on the form. The filemanager will close any open menu and won't respond to clicks on another tab anymore.