[Django] #26066: Admin handles a table of models being wider than the screen badly

Django

unread,

Jan 10, 2016, 11:54:55 AM1/10/16

to django-...@googlegroups.com

#26066: Admin handles a table of models being wider than the screen badly
-------------------------------+------------------------------------
Reporter: chozabu | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 1.9
Severity: Normal | Keywords: admin css style layout
Triage Stage: Unreviewed | Has patch: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------+------------------------------------
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!)

--
Ticket URL: <https://code.djangoproject.com/ticket/26066>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

Django

unread,

Jan 10, 2016, 7:41:12 PM1/10/16

to django-...@googlegroups.com

#26066: Admin handles a table of models being wider than the screen badly

-------------------------------------+-------------------------------------

Reporter: chozabu | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 1.9

Easy pickings: 1 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by elky):

* needs_better_patch: => 0
* needs_tests: => 0
* needs_docs: => 0

Comment:

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.

--
Ticket URL: <https://code.djangoproject.com/ticket/26066#comment:1>

Django

unread,

Jan 11, 2016, 7:18:09 AM1/11/16

to django-...@googlegroups.com

#26066: Admin changelist could handle a table wider than the screen more elegantly
-------------------------------------+-------------------------------------
Reporter: chozabu | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 1.9
Severity: Normal | Resolution:
Keywords: admin css style | Triage Stage: Accepted
layout |
Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by timgraham):

* has_patch: 1 => 0
* type: Bug => Cleanup/optimization
* easy: 1 => 0
* stage: Unreviewed => Accepted

Comment:

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.

--
Ticket URL: <https://code.djangoproject.com/ticket/26066#comment:2>

Django

unread,

Jan 11, 2016, 9:30:02 AM1/11/16

to django-...@googlegroups.com

#26066: Admin changelist could handle a table wider than the screen more elegantly
-------------------------------------+-------------------------------------

Reporter: chozabu | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 1.9

Comment (by chozabu):

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.

--
Ticket URL: <https://code.djangoproject.com/ticket/26066#comment:3>

Django

unread,

Jan 11, 2016, 9:30:56 AM1/11/16

to django-...@googlegroups.com

#26066: Admin changelist could handle a table wider than the screen more elegantly
-------------------------------------+-------------------------------------

Reporter: chozabu | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 1.9

Comment (by chozabu):

unread,

Sep 24, 2022, 9:41:21 AM9/24/22

to django-...@googlegroups.com

#26066: Admin listview could handle a table wider than the screen more elegantly
-------------------------------------+-------------------------------------

Reporter: Alex P-B | Owner: Pablousse
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 1.9

Changes (by Pablousse):

* owner: nobody => Pablousse
* status: new => assigned

Comment:

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

--
Ticket URL: <https://code.djangoproject.com/ticket/26066#comment:11>

Django

unread,

Jan 9, 2024, 5:36:57 AM1/9/24

to django-...@googlegroups.com

#26066: Admin listview could handle a table wider than the screen more elegantly
-------------------------------------+-------------------------------------

Reporter: Alex P-B | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 1.9

Changes (by Mariusz Felisiak):

* owner: Durieux => (none)
* status: assigned => new

--
Ticket URL: <https://code.djangoproject.com/ticket/26066#comment:12>

Django

unread,

May 5, 2025, 1:12:58 PM5/5/25

to django-...@googlegroups.com

#26066: Admin listview could handle a table wider than the screen more elegantly
-------------------------------------+-------------------------------------
Reporter: Alex P-B | Owner: (none)
Type: | Status: new
Cleanup/optimization |

Component: contrib.admin | Version: 1.9

Comment (by Daniel):

Hello everyone, I’ve been exploring Django’s issue tracker as I prepare
for my first contribution and came across this ticket. With my experience
in responsive design and some work with table layouts, I think this could
be a great fit for me.

While setting up a test application and experimenting with the CSS, I
started to wonder if this issue is still relevant or if a solution is
still needed. For example, I noticed that using shift + scroll wheel
(which I believe works across all operating systems and browsers) works
perfectly fine for me to solve the issue.

Looking forward to your thoughts, and thanks for your time and patience.
--
Ticket URL: <https://code.djangoproject.com/ticket/26066#comment:13>

Reply all

Reply to author

Forward