Opened 19 months ago
Closed 13 months ago
#34039 closed Bug (fixed)
Admin search bar is too small to use on small screens
| Reported by: | Thibaud Colas | Owned by: | Ayush Bisht |
|---|---|---|---|
| Component: | contrib.admin | Version: | 4.0 |
| Severity: | Normal | Keywords: | mobile, cross-browser |
| Cc: | Triage Stage: | Accepted | |
| Has patch: | no | Needs documentation: | no |
| Needs tests: | no | Patch needs improvement: | no |
| Easy pickings: | yes | UI/UX: | yes |
Description
For screen widths below 1024px, the search bar gets resized to a width of 12px, which isn’t usable. This seems to be due to an override in `responsive.css`. This has been in place for a while so I’m not sure why this wouldn’t have been noticed sooner, there might be more to it.
Attachments (2)
Change History (19)
comment:1 by , 19 months ago
| Triage Stage: | Unreviewed → Accepted |
|---|
comment:2 by , 19 months ago
| Owner: | changed from to |
|---|---|
| Status: | new → assigned |
by , 19 months ago
| Attachment: | Screenshot Search field OK.png added |
|---|
comment:4 by , 19 months ago
| Has patch: | set |
|---|
comment:5 by , 19 months ago
The root of the issue is in the "flex" management of the component that allows it to expand outside of the screen.
Adding a min-width patches the issue on some display sizes but does not solve the core problem here.
Removing display: flex on #changelist-search > div removes the flex behaviour and the components size adequately regarding the viewport - however they are not side by side anymore.
comment:6 by , 19 months ago
| Patch needs improvement: | set |
|---|
Thanks for this patch, however we should stretch the entire block only the search bar.
comment:7 by , 19 months ago
We were checking it with Thibaud and we realized, it works differently on different browsers, but we're not sure why, thus not sure how to fix it.
https://github.com/thibaudcolas/django/commit/cae12ebc705c6e856d2482ef84c42b298e0887ef
comment:8 by , 19 months ago
Looks like search bar is unusable only if there are 0 records. If one adds some records, then search bar stretches to the size of results div.
comment:10 by , 14 months ago
| Owner: | changed from to |
|---|
comment:11 by , 14 months ago
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
Seems like this issue has been fixed: I ran the code on my machine and the searchbar is resized correctly. It also seems like the issue was fixed for others, according to this thread: https://github.com/django/django/pull/16091
comment:12 by , 14 months ago
| Resolution: | fixed |
|---|---|
| Status: | closed → new |
This ticket is not fixed, and PR16091 was closed without being merged.
comment:13 by , 14 months ago
| Owner: | changed from to |
|---|---|
| Status: | new → assigned |
comment:14 by , 14 months ago
Hey, can anyone please help me to reproduce this issue.. I'm not getting this issue..
comment:15 by , 14 months ago
I also cannot reproduce on Firefox and Chrome. Perhaps other browsers are affected?
comment:16 by , 13 months ago
Chrome 111.0.5563.146, Firefox 111.0.1 work like a charm for 800 & 1024. Shouldn't we close the ticket?
comment:17 by , 13 months ago
| Has patch: | unset |
|---|---|
| Patch needs improvement: | unset |
| Resolution: | → fixed |
| Status: | assigned → closed |
I cannot reproduce it anymore. Closing as fixed, unless someone can provide a reproducible scenario.
Search field working