Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#31986 closed Bug (fixed)

Django Admin filter sidebar does not scroll.

Reported by: haki Owned by: 007
Component: contrib.admin Version: 3.1
Severity: Release blocker Keywords:
Cc: 007, Tom Carrick Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

Starting at Django 3.1, when the Django admin filter sidebar is very long, it does not scroll.

For example:

https://imgur.com/jwnFmYo

Notice how the filter overflows the screen, making the filters on the bottom unreachable.

I've only witnessed this behavior starting at Django 3.1, when the layout of the screen changes for the sidebar.

Change History (7)

comment:1 Changed 3 years ago by Mariusz Felisiak

Cc: 007 Tom Carrick added
Severity: NormalRelease blocker
Summary: Django Admin filter sidebar does not scrollDjango Admin filter sidebar does not scroll.
Triage Stage: UnreviewedAccepted

Thanks for this report.

Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c (Django 3.1.1).

Reproduced at 5ea1621c724e765c9a642a1b3b6e83419fda920b.

comment:2 Changed 3 years ago by 007

At first, I solved the problem with absolute positioning. But it doesn't look very beautiful. So we use overflow:hidden to trigger BFC solve the problem. But unfortunately it led to other problems. So go back to the absolute positioning solution.

PR

comment:3 Changed 3 years ago by Mariusz Felisiak

Has patch: set
Owner: changed from nobody to 007
Status: newassigned

comment:4 Changed 3 years ago by john-parton

Here's a really quick and dirty fix. It requires the browser to support CSS grids.

{% extends "admin/base_site.html" %}

{% block extrahead %}
  {{ block.super }}

  <style>
    @media (min-width: 768px) {
      #changelist {
        display: grid;
        grid-template-columns: 1fr 240px;
        grid-template-rows: auto auto 1fr;
        grid-column-gap: 40px;
        grid-row-gap: 0px;
      }

      #changelist > * {
        grid-column-start: 1;
        grid-column-end: 1;
        margin-right: 0 !important; /* hax :( */
      }

      #changelist-form > * {
        margin-right: 0 !important; /* more hax :( */
      }

      #changelist #changelist-filter {
        position: relative;
        grid-area: 1 / 2 / 4 / 3;
      }
    }
  </style>

{% endblock %}

The wildcard patterns are to reset margins.

EDIT

I don't know what browsers we support, but I can submit this as a proper patch if you want.

Also, if we're allowed to move around elements, I could easily fix this using flexbox.

Last edited 3 years ago by john-parton (previous) (diff)

comment:5 Changed 3 years ago by Carlton Gibson

Triage Stage: AcceptedReady for checkin

comment:6 Changed 3 years ago by Mariusz Felisiak <felisiak.mariusz@…>

Resolution: fixed
Status: assignedclosed

In 8ee4bb6f:

Fixed #31986 -- Fixed admin filter sidebar scrolling.

Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c.

Thanks haki for the report.

comment:7 Changed 3 years ago by Mariusz Felisiak <felisiak.mariusz@…>

In 57b3593:

[3.1.x] Fixed #31986 -- Fixed admin filter sidebar scrolling.

Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c.

Thanks haki for the report.

Backport of 8ee4bb6ffcb3346c0fa8fb194986fbf9edadc822 from master

Note: See TracTickets for help on using tickets.
Back to Top