Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Debug views not rendered correctly in Chrome #624

Closed
jleeothon opened this issue Jul 26, 2014 · 9 comments
Closed

Debug views not rendered correctly in Chrome #624

jleeothon opened this issue Jul 26, 2014 · 9 comments
Labels
Bug Frontend

Comments

@jleeothon
Copy link

A few days ago, when I debug template variables (The Template section of the toolbar), the thing looks slitted. I attach a screenshot. My other browsers, which I keep up-to-date do not exhibit this bug.
The slits show the content behind (a template from my project).
Chrome version: 36.0.1985.125
screen shot 2014-07-26 at 10 12 44 am
@jleeothon jleeothon changed the title "Templates rendered" not seen correctly in Chrome "Templates" not rendered correctly in Chrome Jul 26, 2014
@tim-schilling
Copy link
Contributor

What version of the toolbar are you using?

Edit: Are you using a css framework for the frontend? If so, which one?

@jleeothon
Copy link
Author

Debug toolbar version: 1.2.1. Yes, I'm using Bootstrap 3 from href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
Edit: added Bootstrap version.

@jleeothon jleeothon changed the title "Templates" not rendered correctly in Chrome Debug views not rendered correctly in Chrome Aug 5, 2014
@jleeothon
Copy link
Author

Seems like it happens with all views of the debug toolbar, not just "Templates"... I've changed the bug's title to reflect that.

@tim-schilling
Copy link
Contributor

Cool, I'll try reproducing it again tonight.

@tim-schilling
Copy link
Contributor

I was able to reproduce it. Thanks!

@tim-schilling
Copy link
Contributor

It looks to be caused by the main window having a scroll bar. I was able to reproduce it with the following template:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p style="height: 500px; width: 500px; background-color:red;"></p>
    <p style="height: 500px; width: 500px; background-color:red;"></p>
    <p style="height: 500px; width: 500px; background-color:red;"></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>

@jleeothon
Copy link
Author

I'm not very skilled with frontend, but I'd be happy to help if I can. Any ideas where to start?

@blopker
Copy link
Contributor

blopker commented Aug 16, 2014

This can be fixed by adding overflow: hidden; to the body tag when a panel is open.

@blopker blopker mentioned this issue Aug 16, 2014
Closed
@blopker
Copy link
Contributor

blopker commented Aug 16, 2014

Found the real culprit, see PR #629

ryneeverett pushed a commit to ryneeverett/django-debug-toolbar that referenced this issue Oct 2, 2016
@blopker @tim-schilling
Remove css text-indent hack for back and close buttons.
ffe5db2 
Fixes jazzband#624.
Remove text-index
Remove old 'Back' text
Remove 'close' text
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Frontend
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@blopker @aaugustin @tim-schilling @jleeothon