Admin interface appears broken.

Using Django The Admin
21

Sorry, totally forgot to reply!
I just ran collectstatic (just in case) then, at my admin, used shift + F5 to reload without cache. I must say that this problem started to occur when I upgraded to the latest version of django (from 2.2), so, I don’t know if this will 100% solve your problem.

1 Like
22

a big thank-you; Eventually it was the version problem. I only reused an old version 2.2.10 and the problem solved.

23

A big thank-you; Eventually it was the version problem. I only reused an old version 2.2.10 and the problem solved.

24

I fix the error cleaning the static files and collecting again:

./manage.pyt collectstatic --clean
./manage.pyt collectstatic
1 Like
27

@Rishab08 If you are having an issue, please read How do I ask a good question? - Help Center - Stack Overflow and then post your question as a new topic here.

28

how to fix this problem exactly because i don’t know how is the best solution.
help me to understand

29

I think you’re going to need to be a bit more detailed and specific about the problem you are encountering, what you have already tried from the answers supplied above, and what the results were of those other attempts.

30

I have already tried the above mentioned solutions but in my case it did not work

31

Post the Django version you’re using, and also - post any error information from the terminal

32

just wanted to say thanks for this thread. ran into the same issue when trying to upgrade a project that was dormant for a few years.

started on django 2.2.7, incrementally upgraded to 2.2.28 and 3.0.14 with no visual problems in admin, then ran into this with 3.1.14. i ran collectstatic and then did a hard refresh in chrome and that solved it for me. there was a slight design change so there’s a new left sidebar now

33

@Virako Thank you for the idea. But command must be:

python3 manage.py collectstatic --clear

The problem has been solved

1 Like
34

My case was a bit more nuanced; this post is for future self and for others in the same or similar boat:

New to Python and Django, and inherited an old Django project (version 2.1 + dependencies outdated by ca. 2 years). Did considerable time to update it (i.e., Django to 4.2 + dependencies to latest), and the project site loaded perfectly, but the admin page was broken the way the OP described it.

Tried all that was suggested, but no joy:

  1. Load without cache.
  2. python manage.py collectstatic
  3. python manage.py collectstatic --clear

Solution

It turns out that the original developer(s) committed the admin and debug_toolbar static assets to version control along with the project’s static assets. So

  • python manage.py collectstatic didn’t fetch the most up-to-date ones for admin (matching Django 4.2), but the ones in the repo (that were meant for Django 2.2).

  • python manage.py collectstatic --clear also wasn’t any help, because it just makes sure that the destination is cleared first (if I understand it correctly).

This is the project directory:

<project>
├── <project>
:   :
│   └── static    # <= FROM
│       ├── admin
│       ├── debug_toolbar
│       └── <project>
:
├── static    # <= TO
├── manage.py
:

So collectstatic was copying everything from the <project>/<project>/static directory (labeled FROM) to <project>/static (labeled TO).

The solution (in my case):

  1. Delete admin and debug_toolbar directories.
  2. python manage.py collectstatic
  3. Serve the project.

I’m still working my way through the django.contrib.staticfiles docs, but I presume that step 2. above resorted to fetching the remote static assets from (somewhere?) based on the project’s current dependencies.

35

You are 100% spot-on

Searches through both your project static directories along with the static directories of all installed apps from your python environment. So if you have DDT installed, and configured in your settings.py file, then yes, collectstatic will copy those files to the target directory.

1 Like
36

Thank you for the confirmation and explanation!

If “DDT” stands for Data-Driven Tests (django-ddt?) then thanks again, because the project also has no test coverage so at least I have somewhere to start. (If “DDT” stands for something else, thanks anyway:)

37

DDT - Django Debug Toolbar - mentioned only because you mentioned it as a third-party project above.

1 Like
38

I had the same problem, but I’m using docker conatiner differently. Since DEBUG = False, I set it to True, the problem was fixed, now the admin page can download all static files and opens normally. However, I would like to ask professionals why debug Admin interferes with static files, what is the reason? My research on this has gone unanswered.

39

Django handles all static files differently based on the DEBUG setting, not just the static files associated with the admin app. See the docs at How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django for the details about this.

40

This helped. When debug=False, The admin page will be broken.
It must be True to see all the stylings on the admin page.

41

@shuvostp - This is an inaccurate statement and an incorrect conclusion.

If you have debug=False, you must configure your system correctly regarding static files. If you do that, then the styles in the admin will be correct.

If you are having problems with your configuration and would like assistance resolving it, please open a new topic.

Include in that topic the contents of your settings.py file and your root urls.py file.