Screen Options & Help Buttons not working when including Bootstrap Css

Question

The wordpress 'Help' and 'Screen Options' Buttons in the wordpress Admin Panels are not working when including bootstrap and specifically the bootstrap-css files.

It is caused because bootstraps css overides:

.hidden {
  display: none !important;
}

How can I make the buttons working again?

It is related to this Thread but it is not linked to bootstrap therefore I answer it here again as a bootstrap specific problem.

Answer 1

Check if you or a plugin include bootstrap and the bootstrap CSS / Theme files.

Bootstraps .hidden class looks like:

.hidden {
  display: none !important;
}

But overrides wordpress' definition of .hidden:

.hidden {
  display: none;
}

The Top 'Help' & 'Screen Options' bars are displayed via inline style display: block, which is overridden by bootstraps .hidden {display: none !important} css class.

This can be fixed by rewriting the Top Bars Css via Jquery / JS.

Working example:

jQuery(document).ready(function ($) {
    $("#contextual-help-link").click(function () {
        $("#contextual-help-wrap").css("cssText", "display: block !important;");
    });
    $("#show-settings-link").click(function () {
        $("#screen-options-wrap").css("cssText", "display: block !important;");
    });
});

Answer 2

Add this in the CSS:

* {
    box-sizing: content-box;
}