#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: | dev |
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)
Change History (7)
by , 12 years ago
Attachment: | changelist.css.patch added |
---|
comment:1 by , 12 years ago
UI/UX: | set |
---|
comment:2 by , 12 years ago
comment:3 by , 12 years ago
Triage Stage: | Unreviewed → 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.
comment:4 by , 12 years ago
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:5 by , 10 years ago
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:
- moving scrollbar up with double rotation of 180deg: http://jsfiddle.net/avrahamcool/uPwfn/2/ but it fails on Chrome - half of input boxes does not work (don't know why)
- changing #content-main to
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
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.