Django-debug-toolbar: Use of hidden="hidden" breaks DjDT when used with bootstrap4 and pureCSS
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.
frgtn
All 13 comments
We are using hidden="hidden" to allow for a content security policy to be enabled as per #330 and #704.
tim-schilling
on 31 Aug 2015
Fixed it for me with this rule:
[hidden][style="display: block;"] { display: block !important; }
ssbb
on 7 Sep 2015
@ssbb thanks for the workaround. We're using it for now in cookiecutter-django.
audreyfeldroy
on 24 Sep 2015
@ssbb, thanks, had this problem when starting with bootstrap4.
VidJa
on 29 Oct 2015
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 :+1: :+1:
@ssbb: Perfect workaround! :+1:
SimonSteinberger
on 30 Oct 2015
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; }
ssbb
on 30 Oct 2015
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...
aaugustin
on 20 Nov 2015
BTW, found the same issue, when using Material Design Lite's css.
svetlyak40wt
on 21 Jan 2016
Indeed, I noticed that a few days ago as well.
aaugustin
on 21 Jan 2016
Same issue with MDL @aaugustin, did you find out a trick ?
nicolastobo
on 4 Feb 2016
4111d930327f10a47c8bcc6b46f21d5aa62d4460 should fix this.
aaugustin
on 21 Feb 2016
please release a new fix version on pypi. @aaugustin
maguowei
on 23 May 2016
Yes please
aaj
on 4 Jul 2016
Related issues
FlipperPA
·
11Comments
minhajme
·
10Comments
Arlington1985
·
5Comments
dvaldivia
·
6Comments
pawamoy
·
5Comments
Most helpful comment
please release a new fix version on pypi. @aaugustin