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

[Alex P-B]

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!)

[elky]

Thanks for reporting!

Removing overflow: auto makes results table overlapped by a filter sidebar (if you have filter setting in your admin.py 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.

[Tim Graham]

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.

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

[Alex P-B]

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

[Alex P-B]

interesting note: ​http://jsfiddle.net/Lq4uk/88/ - 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...

[Sasha Gaevsky]

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

[Markus Amalthea Magnuson]

See https://code.djangoproject.com/ticket/15188#comment:9 and the attached file above it for a test project illustrating very long values in admin list view.

[Durieux]

Seems like this bug hasn't been updated in a a long time, I'll see if I can solve it