Help: Django 4.2 admin page CSS issue

ZorinArch · April 12, 2023, 5:24am

Hi,

I upgrade from dgango 4.1 to v4.2 and when i open django admin page it look like below:

i open admin page on different browsers and the problem still. what cause the problem?

KenWhitesell · April 12, 2023, 11:18am

This is the login page for the admin?

Are you using a custom login page or customized CSS for the default page?

If either one is true, I’d suggest going back to the defaults until you can figure out what the conflict is.

ZorinArch · April 13, 2023, 3:16am

I don’t use custom css for admin page, also i disable all css links and these are my custom admin setting i use

admin.site.site_header = 'MySite Administration'
admin.site.index_title = 'MySite Site administration'
admin.site.site_title = 'MySite site admin'

i disable them and close browser and open it again on incognito mode and the problem not solved.

manelpardo · April 15, 2023, 11:43am

I have exactly the same issue when I open Django Admin page in Chrome, however this issue disappears when I open the admin page in Safari.

When using Safari, the Django Admin page looks good:

When using Chrome, the Django Admin page looks as @ZorinArch showed.

Django version: 4.2
Chrome: Version 111.0.5563.146 (Build oficial) (arm64)
Chip Apple M1 Pro

KenWhitesell · April 15, 2023, 12:07pm

My first suggestion in cases like this is to make sure your local browser cache is cleared. And, in Chrome, you can run with the browser cache disabled if you have the developer tools open.

francotrax · April 19, 2023, 7:48pm

I too have exactly the same problem after upgrading Django to 4.2. The layout on admin page appears to be broken. I cleared the browser cache but it is still the same. I also rebuilt and redeployed my static assets, but the problem persists.

KenWhitesell · April 19, 2023, 8:13pm

You’ll want to verify that when the admin page is being loaded that your browser is issuing requests for the various static files. Check the console log where you’re running runserver, you should see those requests. If you don’t, then the browser isn’t making them. (You can also check the browser’s developer tools on the network tab to see the network requests being made by the browser.)

Maxch3306 · April 20, 2023, 2:17am

Same here:
console log:
[20/Apr/2023 10:15:53] “GET /admin/ HTTP/1.1” 200 5559
[20/Apr/2023 10:15:53] “GET /static/admin/css/base.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/dark_mode.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/dashboard.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/nav_sidebar.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/responsive.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/js/nav_sidebar.js HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/js/theme.js HTTP/1.1” 404 179

setting.py:
STATIC_URL = ‘./static/’
STATIC_ROOT = ‘./static’

and also I run “py mange.py collectstatic” after I setting STATIC_URL and STATIC_ROOT

KenWhitesell · April 20, 2023, 2:49am

STATIC_ROOT should be a complete absolute path to the static directory where static files are to be stored, not a relative reference. See Settings | Django documentation | Django

Beyond that, are you running Django at this point using runserver? If so:

What’s the DEBUG setting in your settings.py file?
What’s the STATICFILES_DIRS setting?
What does your root urls.py file look like?

If you’re not using runserver, how are you running Django?

mabaran00 · April 27, 2023, 3:04am

Looks like I am not alone.

I am running from runserver, python manage.py runserver ip_address:8000

Not seeing a STATICFILES_DIRS setting?

My DEBUG is set to false,
Allowed hosts is [‘*’]

URLS.PY is and contains no Includes.


urlpatterns = [
    path('', include('members.urls')),
    path('admin/', admin.site.urls),
]

SETTINGS.PY

"""
Django settings for netadmin project.

Generated by 'django-admin startproject' using Django 4.2.

For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-_XXXXXXXXXXXXXXXXXXX'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'members'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'netadmin.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'netadmin.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

KenWhitesell · April 27, 2023, 3:52am

In that case, see the docs at How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django, particularly the sections that talk about serving static files during development when DEBUG=False.

(Or, change DEBUG to True)

mabaran00 · April 27, 2023, 3:58am

Changed debug to
DEBUG = True
And it is working.

Hope this works for everyone else.

francotrax · May 10, 2023, 7:14pm

For anyone else out there looking for a solution, here is how I fixed my problem with admin layout being broken.

Check if you have a folder “admin” inside your “static” folder.
Delete the “admin” folder.
Git commit & push / rebuild & deploy

Problem fixed.

Make sure that you NEVER commit “admin” static assets to version control because Django will then always load “admin” assets from the repo which may be updated, and will cause bizarre problems.

mikekwabs · June 20, 2023, 7:25am

Apparently, setting DEBUG to False will cause the error in loading static files for the admin site. So to fix that, go to your settings.py file and set DEBUG to True.

KenWhitesell · June 20, 2023, 12:04pm

@mikekwabs - That’s not the most appropriate solution. What you really want to do in this situation is to properly handle static files as referenced in the docs linked above. Changing DEBUG fixes the symptom, but not the problem.

mikekwabs · June 20, 2023, 12:52pm

Absolutely true. Got it! Thank you.

LarryMartell · August 23, 2023, 9:57pm

I also am experiencing this. Does anyone have a solution?

amirja · August 26, 2023, 1:24pm

Apparently static paths are set correctly but browser block them when DEBUG = False
how can i fix this problem??

KenWhitesell · August 26, 2023, 8:53pm

No, the browser is not blocking them. The issue is that the server is returning a 404 error page instead of the desired css/js which means that your static paths are not set up correctly for a production-style environment. See the link above at Help: Django 4.2 admin page CSS issue - #11 by KenWhitesell.

pythonforce · September 3, 2023, 5:26pm

python manage.py collectstatic - did not work for me
python manage.py collectstatic --clear - did not work for me
Downgrading from 4.2.4 to lower - did not work for me
Hard refresh browser - did not work for me
Clear cache - did not work for me

What worked for me since I have CloudFront to invalidate entire admin CSS folder, you can do it via AWS CLI or AWS Management Console:
Object path: /static/admin/css/*

Topic		Replies	Views
Tutorial - Admin page view not rendering? Getting Started	4	680	May 3, 2023
Django Admin page CSS problem Mystery Errors	30	218	March 14, 2024
why when I set debug = false, then admin/ looks bad? Mystery Errors	4	344	March 24, 2024
Admin Page do not look good Groups and users Using Django	4	513	July 20, 2020
problem with admin part of django Using Django	19	2526	August 5, 2021

Help: Django 4.2 admin page CSS issue

Related Topics