Django Admin filter sidebar does not scroll.

[haki]

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.

[Mariusz Felisiak]

Thanks for this report.

Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c (Django 3.1.1).

Reproduced at 5ea1621c724e765c9a642a1b3b6e83419fda920b.

[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

[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.

[Mariusz Felisiak <felisiak.mariusz@…>]

In 8ee4bb6f:

Fixed #31986 -- Fixed admin filter sidebar scrolling.

Regression in 2bc38bc7cae002f949157d95e3f0c19ea6b8ca5c.

Thanks haki for the report.

[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