Opened 4 years ago

Closed 4 years ago

Last modified 4 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 by Mariusz Felisiak, 4 years ago

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 by 007, 4 years ago

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 by Mariusz Felisiak, 4 years ago

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

comment:4 by john-parton, 4 years ago

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 4 years ago by john-parton (previous) (diff)

comment:5 by Carlton Gibson, 4 years ago

Triage Stage: AcceptedReady for checkin

comment:6 by Mariusz Felisiak <felisiak.mariusz@…>, 4 years ago

Resolution: fixed
Status: assignedclosed

In 8ee4bb6f:

Fixed #31986 -- Fixed admin filter sidebar scrolling.

Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c.

Thanks haki for the report.

comment:7 by Mariusz Felisiak <felisiak.mariusz@…>, 4 years ago

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