django admin site nav sidebar messed up

Question

I recently added a package to my project and did a pip freeze > requirements.txt afterwards. I then did pip install -r requirements.txt to my local and it added a sidebar.

I did a pip install -r requirements.txt to the server as well and it produced a different result. It's sidebar was messed up.

I tried removing the sidebar by doing this answer but it did not get removed.

.toggle-nav-sidebar {
    z-index: 20;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    width: 23px;
    border: 0;
    border-right: 1px solid var(--hairline-color);
    background-color: var(--body-bg);
    cursor: pointer;
    font-size: 20px;
    color: var(--link-fg);
    padding: 0;
    display: none; /*added*/
}

#nav-sidebar {
    z-index: 15;
    flex: 0 0 275px;
    left: -276px;
    margin-left: -276px;
    border-top: 1px solid transparent;
    border-right: 1px solid var(--hairline-color);
    background-color: var(--body-bg);
    overflow: auto;
    display: none; /*added*/
}

What should I do to fix this?

If there are any other things I can add to help, do ask.

ADD requirements.txt:

asgiref==3.3.4
certifi==2020.12.5
chardet==4.0.0
defusedxml==0.7.1
diff-match-patch==20200713
Django==3.2.3
django-cors-headers==3.7.0
django-filter==2.4.0
django-import-export==2.5.0
django-property-filter==1.1.0
djangorestframework==3.12.4
et-xmlfile==1.0.1
idna==2.10
MarkupPy==1.14
odfpy==1.4.1
openpyxl==3.0.7
python-decouple==3.4
pytz==2019.2
PyYAML==5.4.1
requests==2.25.1
sqlparse==0.3.0
tablib==3.0.0
urllib3==1.26.4
xlrd==2.0.1
xlwt==1.3.0

ADD sample github repo:

What new package did you add? If you mean you _upgraded_ Django, then the sidebar was added in Django 3.1. My question then is did you run `collectstatic`? (And potentially some CSS files might be cached too, try `CTRL + F5` (hard refresh)) — Abdul Aziz Barkat, May 26 '21 at 17:07
@AbdulAzizBarkat I ran `collectstatic` on my live. And I did hard refresh as well. it still is the same — Prosy Arceno, May 26 '21 at 17:12
Try to delete the static folder, then try to do collectstatic again. — lucutzu33, May 26 '21 at 17:21
@ProsyArceno Is it possible for you to provide the requirements.txt contents? As well, before trying that answer, did you add any custom css? — Nagaraj Tantri, May 30 '21 at 07:14
@NagarajTantri. I added the requirements.txt. I have not added any custom css. — Prosy Arceno, May 30 '21 at 07:32
@ProsyArceno does it also happen the same in incognito window? Very difficult to reproduce this with minimal information. As well, did you check once with your browser's zoom setting? — Nagaraj Tantri, May 30 '21 at 16:29
But do you want to fix the sidebar or do you want to remove it? — Marc Compte, May 30 '21 at 22:10
@MarcCompte, fix. Remove would be an okay solution, but a fix would be best — Prosy Arceno, May 31 '21 at 00:14
Yes, you should aim at fixing it. As a temporary solution check https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/base.html#L73. If you pass a `is_nav_sidebar_enabled` in the context to your AdminSite, you can have it removed the proper way (not with CSS). — Marc Compte, May 31 '21 at 00:39
For the actual fix, this looks a lot like there are colliding stylesheets. I guess this is not an option, but if there would be a way for us to check the actual site having problems (the github repo does not produce this result to me), it would be easier to identify the actual problem. — Marc Compte, May 31 '21 at 00:41
Try to do this. Go to the production admin site and right click on the nav_bar and select inspect. On the DOM, select exactly the main div (#nav-sidebar) and check the styles applied to it. Try to figure out which one is the one making your sidebar loose its original style. There has to be one overriding the default django style. This will let you identify a little better the problem. — Marc Compte, May 31 '21 at 00:44
Then, one possible fix is to eliminate that stylesheet (or the part mentioning the sidebar). Another fix would be to override that yourself by adding a new CSS with a copy of the Django css style and being more specific with your CSS selectors. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Marc Compte, May 31 '21 at 00:48

score 15 · Accepted Answer · answered May 31 '21 at 03:01

First of all, this navbar is added by Django 3.1+ and not by any other 3rd part packages.

Copy & Pasting from Django 3.X admin showing all models in a new navbar,

From the django-3.1 release notes,

The admin now has a sidebar on larger screens for easier navigation. It is enabled by default but can be disabled by using a custom AdminSite and setting AdminSite.enable_nav_sidebar to False.

So, this is a feature that added in Django 3.1 and can be removed by settings AdminSite.enable_nav_sidebar = False (see How to customize AdminSite class)

How to fix irregular styling?

You don't have to edit any CSS or HTML file to fix the styling, because Django comes with a new set of CSS and HTML, which usually fix the issue. (That is, it is not recommended to alter the styling file only for this)

If that doesn't work for you, it might be because of your browser cache.

If you are using Chrome,

Go to the admin page
Ctrl + Shift + i and select Network tab and then tick Disable Cache
Refresh the page

This deserves many many many more likes than it has – Dfranc3373 May 12 '22 at 04:03 — Dfranc3373, May 12 '22 at 04:03

score 13 · Answer 2 · answered Jun 05 '21 at 07:27

13

see this side bar is added by django 3.1 and it is removable

to remove this you have to add below code in admin.py or urls.py as you are working with admin you should add below code in admin site

from django.contrib import admin

admin.autodiscover()
admin.site.enable_nav_sidebar = False

autodiscocer(): This function attempts to import an admin module in each installed application

please let me know if worked

answered Jun 05 '21 at 07:27

Vishal Pandey

349
1
4
15

3

efficient! and +1 for showing the complete example, including the place to put the code. – benzkji Jun 26 '21 at 11:11
FYI, admin.autodiscover() is not needed. – elad silver Feb 22 '23 at 09:27

score 1 · Answer 3 · answered Aug 29 '22 at 17:00

1

I fixed this by deleting my static directory, then doing a collect static, then forcing my browser to reload.

This had been caused in a Django 3 to 4 upgrade.

answered Aug 29 '22 at 17:00

JamieO

11
2

django admin site nav sidebar messed up

3 Answers3

How to fix irregular styling?

Linked