Use of hidden="hidden" breaks DjDT when used with bootstrap4 and pureCSS

[frgtn]

django-debug-toolbar uses hidden="hidden" attributes on its HTML elements which are left regardless of element being displayed or not. This causes django-debug-toolbar UI (both handle and main interface) to remain hidden when used together with Bootstrap 4 or PureCSS.

Both Boostrap 4 and PureCSS use:

[hidden] {
  display: none !important;
}

https://github.com/twbs/bootstrap/blob/v4.0.0-alpha/scss/_utilities.scss#L35

The problem is that jQuery .show() does not remove hidden="hidden" attribute but instead sets style="display: block", which is overriden by the above CSS block (See note about !important in http://api.jquery.com/show/)

One approach would be to follow jQuery docs and use .css('style', 'display: block !important'). A better approach would be to use style="display: none" instead of hidden="hidden" which I think is better, since style attribute is also used for setting DjDT handle position.

[tim-schilling]

We are using hidden="hidden" to allow for a content security policy to be enabled as per #330 and #704.

[ssbb]

Fixed it for me with this rule:

[hidden][style="display: block;"] { display: block !important; }

[audreyfeldroy]

@ssbb thanks for the workaround. We're using it for now in cookiecutter-django.

[VidJa]

@ssbb, thanks, had this problem when starting with bootstrap4.

[SimonSteinberger]

Admitted, I don't understand the security policy issue, which is the reason for using the hidden attribute in this way. However, regardless I believe somethings wrong here. The hidden attribute's purpose is to define elements as hidden. I think PureCSS and Twitter Bootstrap got it right. Maybe django_toolbar should revert to using the data attributes if possible. This issue will likely affect more and more people in time. Still, wonderful Django addon 👍 👍

@ssbb: Perfect workaround! 👍

[ssbb]

Better to use "contains" instead of equality (because toolbar handle is movable (via style="top: xxx") and if you will move it, you can never see it again :D)

[hidden="hidden"][style*="display: block;"] { display: block !important; }

[aaugustin]

Perhaps we could achieve the desired effect with a djdt-hidden CSS class instead? Is someone interested in trying that and submitting a patch? This sounds better than asking everyone to add hacks to their CSS...

[svetlyak40wt]

BTW, found the same issue, when using Material Design Lite's css.

[aaugustin]

Indeed, I noticed that a few days ago as well.