Skip to content

Django Debug Toolbar renders poorly #2039

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
Open
pauloxnet opened this issue Apr 18, 2025 · 4 comments
Open

Django Debug Toolbar renders poorly #2039

pauloxnet opened this issue Apr 18, 2025 · 4 comments
Assignees
@pauloxnet
Labels
bug dependencies Pull requests that update a dependency file good first issue Good for newcomers help-needed Help needed styles

Comments

@pauloxnet
Copy link
Member

Running the project locally for development, I noticed that Django Debug Toolbar (DDT) renders poorly.

I compared the rendered bar on a Django project created with startproject and there are several differences in rendering as shown in the difference of the two screenshots.

Image
DDT in current repository

Image
DDT in a new demo project

I ask you to verify that also in your local environments the bar is rendered badly, in order to confirm the bug and understand if a fix is ​​needed in the local code or if we need to open an issue in the DDT repository.
@pauloxnet pauloxnet added bug dependencies Pull requests that update a dependency file help-needed Help needed labels Apr 18, 2025
@pauloxnet pauloxnet self-assigned this Apr 18, 2025
@marksweb
Copy link
Contributor

Confirmed.

I think this is coming from height: 46px; for form buttons in output.css.

@marksweb marksweb added styles good first issue Good for newcomers labels Apr 18, 2025
@pauloxnet
Copy link
Member Author

Confirmed.

I think this is coming from height: 46px; for form buttons in output.css.

Thanks.

I also see some differences with text and colors.

@bmispelon bmispelon linked a pull request Apr 18, 2025 that will close this issue
Fixed styling of buttons leaking to Debug Toolbar #2041
Closed
@bmispelon
Copy link
Member

Indeed, this happens because the toolbar is inheriting some of our global styles. I don't see a general way around that, but I've opened a PR that at least fixes the button sizing: #2041.

@tim-schilling tim-schilling mentioned this issue Apr 18, 2025
Open
@bmispelon
Copy link
Member

Thanks to the work of the debug toolbar's maintainers, this will be fixed upstream once django-commons/django-debug-toolbar#2130 is merged/released. 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pauloxnet pauloxnet

Labels
bug dependencies Pull requests that update a dependency file good first issue Good for newcomers help-needed Help needed styles
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixed styling of buttons leaking to Debug Toolbar bmispelon/djangoproject.com
3 participants
@bmispelon @pauloxnet @marksweb