Opened 5 years ago

Last modified 4 years ago

#26066 new Cleanup/optimization

Admin listview could handle a table wider than the screen more elegantly

Reported by: Alex P-B Owned by: nobody
Component: contrib.admin Version: 1.9
Severity: Normal Keywords: admin css style layout
Cc: sasha@…, markus.magnuson@… Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes


The main problem is either long bits of text OR large numbers of columns causing the table to become wider than the screen.

With the current overflow settings, this means an admin has to scroll to the bottom of the page to find the slider - which is boarding on unusable

My current solution is to duplicate "changelists.css" into my own project, and alter this part:

#changelist-form .results {
  /*overflow-x: auto;*/

Simply removing the overflow method means the page is wider than the screen, and an admin can now easily scroll left and right.
This is not a very clean solution but *vastly* preferable to current situation!

Making the problem worse, is even a column of single digit numbers can be very wide if the column header is a few words long. My solution to this is as follows:

#changelist table thead th {
    padding: 0;
    /*white-space: nowrap;*/
    vertical-align: middle;

This allows the headings to wrap - saving loads of space in several situations.

This seems to be an issue quite a few people were struggling with on stackoverflow, and is my first bug report. (On that note, Django is fantastic, this minor issue with default styling is my biggest complaint after months!)

Change History (10)

comment:1 Changed 5 years ago by elky

Thanks for reporting!

Removing overflow: auto makes results table overlapped by a filter sidebar (if you have filter setting in your of course). So this needs more tricky UX solution.

I had similar problem on one of the projects and I consulted with UX guy who just advised me to hide some of less-informative columns or display shorted info (like B. Obama instead of Barack Obama) to save space.

comment:2 Changed 5 years ago by Tim Graham

Easy pickings: unset
Has patch: unset
Summary: Admin handles a table of models being wider than the screen badlyAdmin changelist could handle a table wider than the screen more elegantly
Triage Stage: UnreviewedAccepted
Type: BugCleanup/optimization

I think the current situation isn't so bad -- I agree with the point about trying to design the tables not to contain so much information in the first place. Of course, if someone comes up with a nice solution we can take a look.

comment:3 Changed 5 years ago by Alex P-B

Hmm, on my wide table I did not have filters enabled yet - Just tried turning them on, and yes that is indeed a problem!
Though, rather than setting the table to have an overflow which is very hard to scroll left and right, I'd rather make the filters box a dropdown...
Having said that - I'd also be happy if my browser kept the tables scrollbar onscreen when overflow is active!

Though, rather than shortening my column headers - I'm still rather happy with letting them wrap so

is still shorter than
B. Obama

remains more informative, and requires less effort on my part - happy for the header to take an extra line or two, each page of the table is ~100-200 lines anyhow.

Still - even with this in place, I have a table or two that are too wide - and I'd really like to have the option of wider tables too!

timgraham, I must disagree - current situation is quite bad - a wide table with a full page of data is nearly unusable! Though, I do appreciate this ticket being renamed to a positive action, rather than negative identification :)

I'll post here if I come up with another good general purpose solution to solve the problem, rather than reduce it.

comment:4 Changed 5 years ago by Alex P-B

Oh - another option could be to simply put the filters box on the left of the table...

comment:5 Changed 5 years ago by Alex P-B

Summary: Admin changelist could handle a table wider than the screen more elegantlyAdmin listview could handle a table wider than the screen more elegantly

comment:6 Changed 5 years ago by Alex P-B

interesting note: - setting width to 100% causes the scroll bar to remain visible on the overflow.
However, it seems to fail when there is text above the table...

comment:7 Changed 5 years ago by Sasha Gaevsky

Do you have a real-life example of wide admin table to test with?

comment:8 Changed 5 years ago by Sasha Gaevsky

Cc: sasha@… added

comment:9 Changed 4 years ago by Markus Amalthea Magnuson

See and the attached file above it for a test project illustrating very long values in admin list view.

comment:10 Changed 4 years ago by Markus Amalthea Magnuson

Cc: markus.magnuson@… added
Note: See TracTickets for help on using tickets.
Back to Top