Code

Opened 17 months ago

Closed 16 months ago

Last modified 4 weeks ago

#19972 closed Cleanup/optimization (fixed)

Changelist tables that are larger than the viewport slip under the filter sidebar

Reported by: loic84 Owned by: nobody
Component: contrib.admin Version: master
Severity: Normal Keywords:
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

When filtered, the changelist table can appear under the filter sidebar (z-index), therefore hiding some columns. Unless you can enlarge your window further there is currently no way to reveal the hidden content.

Adding the CSS property overflow-x: auto as done in the patch solve that and allow the user to scroll horizontally to reveal the hidden content. It also makes the page look less buggy as the content no longer breaks out of its container.

Tested both with LTR and RTL locales.

As a side note, if you would like to replicate this issue, do so with a large table rather than a small viewport since the admin CSS has a min-width that kicks in at some point.

Attachments (2)

changelist.css.patch (458 bytes) - added by loic84 17 months ago.
printscreen.png (11.5 KB) - added by lpiatek 4 weeks ago.
content-main tinkering result

Download all attachments as: .zip

Change History (7)

Changed 17 months ago by loic84

comment:1 Changed 17 months ago by loic84

  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset
  • UI/UX set

comment:2 Changed 17 months ago by ramiro

Already reported in #13735.

If you can review the other ticket, close one and merge best ideas form both I will commit the result. Thanks.

comment:3 Changed 17 months ago by loic84

  • Triage Stage changed from Unreviewed to Ready for checkin

Marked #13735 as a duplicate.

Both patches solve the issue in essentially the same way: setting the overflow CSS property to .change-list .results.

This patch is slightly more targeted by only affecting filtered changelists and the horizontal overflow.

Last edited 16 months ago by loic84 (previous) (diff)

comment:4 Changed 16 months ago by Florian Apolloner <florian@…>

  • Resolution set to fixed
  • Status changed from new to closed

In a45d06ca3dc994e48cfce815ab913cc188c4b30f:

Fixed #19972 -- Fixed overflow issue in admin changelist pages.

Thanks to loic84 for the report and patch.

comment:5 Changed 4 weeks ago by lpiatek

loic84 do You have any other idea to overcome issue that is scrolling down the page to get to the hidden content by the viewport?

I have tried:

  width: auto;
  min-width: 100%;

Last solution gives scollbar on window when content is bigger than viewport (I don't have to scroll down the page to scroll but ugly top bar stays at 100% which is narrower than content). This is the best solutions I could think of.

I've put screenshot of the result of tinkering with #content-main: https://code.djangoproject.com/attachment/ticket/19972/printscreen.png

Last edited 4 weeks ago by lpiatek (previous) (diff)

Changed 4 weeks ago by lpiatek

content-main tinkering result

Add Comment

Modify Ticket

Change Properties
<Author field>
Action
as closed
as The resolution will be set. Next status will be 'closed'
The resolution will be deleted. Next status will be 'new'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.