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

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.

Recent Tutorials
Edit domains and sitemaps
Apr 4, 2025
By myq.

How to create a sitemap when using an edit domain

Customize the default page title
Mar 12, 2025

Change the default " :: " and/or "site name :: page title" formatting separator to something else.

Configure Composer to work with a Page Type
Feb 20, 2025
By myq.

Fix the "Unable to load block into composer. You must edit this content from within the context of the page." error message

Permissions for editors in a multilingual site
Feb 2, 2025
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Restoring deleted pages using advanced search
Jan 16, 2025
By myq.

How to recover deleted pages when there are more than a few to choose from.

How to Automate the Copyright Year
Dec 27, 2024

Learn how to keep your website's copyright year updated automatically in Concrete CMS.

Improvements?

Let us know by posting here.