Help: Django 4.2 admin page CSS issue

[ZorinArch]

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]

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]

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]

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]

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]

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]

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]

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]

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]

Looks like I am not alone.

Tutorial - Admin page view not rendering?

I was able to create the super user. However, when I go to the admin site the page does not appear to be loading correctly. I get this on Firefox and Edge. Not sure if I missed editing something or not. [image]

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]

@mabaran00

My DEBUG is set to false,

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]

Changed debug to
DEBUG = True
And it is working.

Hope this works for everyone else.

[francotrax]

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

1. Check if you have a folder “admin” inside your “static” folder.
2. Delete the “admin” folder.
3. 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]

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]

@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]

Absolutely true. Got it! Thank you.

[LarryMartell]

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

[amirja]

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

[KenWhitesell]

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]

1. python manage.py collectstatic - did not work for me
2. python manage.py collectstatic --clear - did not work for me
3. Downgrading from 4.2.4 to lower - did not work for me
4. Hard refresh browser - did not work for me
5. 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/*