Opened 5 years ago

Closed 3 months ago

#14716 closed Bug (fixed)

filter_horizontal and filter_vertical don't work on mobile Safari

Reported by: anonymous Owned by: nobody
Component: contrib.admin Version: 1.2
Severity: Normal Keywords:
Cc: Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes


Create a ModelAdmin for a model with a ManyToManyField. Specify that it should display using filter_horizontal or filter_vertical. Confirm that it works fine in a desktop browser (Firefox or Chrome). But fire it up on an iPad and see the two widgets appear with "0 Items" listed instead of the actual items. The admin widgets are non-functional.

Change History (9)

comment:1 Changed 5 years ago by anonymous

  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset

FWIW, I switched on Safari's Debug Mode, and all it says is "No Errors" in the console. Not much help.

comment:2 Changed 5 years ago by gabrielhurley

  • Triage Stage changed from Unreviewed to Accepted

I can confirm the problem on my iPhone 4 running iOS 4.2. If you tap in the box for the filter horizontal widget you'll actually get an iPhone interface for doing multiple selection that works. The whole business just looks wrong and is counterintuitive/unhelpful.

I'd guess this is related to how mobile safari treats certain classes of html input elements. I'm not an expert on mobile browsers though, so I can't provide too much more info. A quick search on Google reveals similar complaints with no simple solutions other than serving a plain HTML widget to mobile devices and letting their own interface sort it out.

comment:3 Changed 5 years ago by jaddison

  • Severity set to Normal
  • Type set to Bug

comment:4 Changed 4 years ago by julien

  • UI/UX set

comment:5 Changed 4 years ago by aaugustin

  • UI/UX unset

Change UI/UX from NULL to False.

comment:6 Changed 4 years ago by aaugustin

  • Easy pickings unset

Change Easy pickings from NULL to False.

comment:7 Changed 4 years ago by aaugustin

  • UI/UX set

Revert accidental batch modification.

comment:8 Changed 3 months ago by elky

Both widgets (horizontal and vertical) work for me on iOS 8. One only thing is that confusing "0 items" label. This is standard behaviour that means "0 items selected". If you tap on the dropdown you're be able to select multiple items in the list. When you done - label will be changed to "<num> items" where <num> is number of items you selected. I think it should be fine for iOS users who are accustomed to use select multiple on other websites.

Few screenshots to show how it works:

  1. Vertical filter initial state -
  2. Tap on 'Available' filter to see list of available items -
  3. Tap on items you need to select -
  4. State after tapping 'Done' -
  5. Tap on 'Chosen' filter -

Of course UX of this thing is awful but one only thing we can do here is to move selected items to 'Chosen' right after tapping 'Done' avoiding user to tap on arrow icon. But this is separate issue I believe that should be done within whole admin mobile optimisation.


comment:9 Changed 3 months ago by timgraham

  • Resolution set to fixed
  • Status changed from new to closed

A separate ticket for a better mobile experience sounds like a good idea.

Note: See TracTickets for help on using tickets.
Back to Top