1

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.

  • I also had the same issue. The reason was I had installed a PopUP plugin, so I deactivated it and it works fine now. – Sharif Oct 9 '17 at 8:09
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;");
    });
});
-1

Add this in the CSS:

* {
    box-sizing: content-box;
}
  • 3
    Please add some text explaining why this should work. – cjbj Jul 13 '16 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.