Add mobile support based on a full screen layout

[koenpeters]

I opened this issue as requested by @tjschuck in this thread.

To make chosen work well on a mobile device we could drop the classic desktop behavior (showing the list of options below the element), and adopt the native mobile drop-down list layout (shown as a full screen position: fixed element list). All major mobile OS's do it like this. Of course the chosen-search input element would be included at the top of the the full screen view.

In my view this would build on best mobile practices that have been establishes in the last couple of years and therefore would benefit usability and user expectations. In my experience using (adapted) chosen or out-of-the-box select2 pull-down lists on mobile devices gives a "sub-optimal" experience.

A few comments that were made in the thread this issue is based on:

• Added by @koenpunt: I like that thought! But probably required a LOT of CSS updates.
• Added by @mlettini It might be doable, but it probably requires JS changes too. Because if we're talking CSS-only then you'd need to move the Chosen select out of it's position, which would require position: fixed. And if it's fixed, that usually doesn't work too well on mobile. And then the CSS would need to accommodate if the keyboard is open or not, and I'm not entirely sure how well that is handled (probably "not well at all"). And on top of all this, there's the different mobile OSes and their styles, and then we'd have to support certain mobile browsers... high effort IMO.
• Added by @koenpunt Issues with position: fixed was the first thing that came to mind for me as well, but if you take a look here: http://caniuse.com/#feat=css-fixed, you'll see that's probably not much of a problem anymore.

A few comments of my own

• This behavior should only be used when the viewport's width drops below a certain (configurable?) threshold. I suggest to base this behavior on CSS media queries. We could also base this on popular CSS framework's media query breakpoints (like Twitter bootstrap) and have a different layout for a few popular breakpoints.
• I agree with @koenpunt that the position: fixed issue seems to be solved in all mobile OS's, but we should of course give it a test.
• I agree with @mlettini that the open / closed keyboard wil be an issue. Although I''m sure we can work out something that works well enough.
• I do not think that we should copy the native look-and-feel too much. We don't do that now with the desktop OS's so why do that with mobile OS's? I'd take a look at how they do it and pick and choose what suits us best.
• I do not know all chosen options by heart but I can imagine that some would not really work with a full screen take-over view. For instance if the user opens a pull-down by default: what would be do? If we would simply show the full screen list it would obscure the user's view of the actual page which would be bad. Also: this way we cannot have more than one pull-down open at any given time, which may or may not be an issue.
• Depending on the mobile OS the ways to cancel the selection differs. Clicking outside the pull-down list is no longer an option since it's full screen. On Windows Phone and Android there is a back button that is used which works very naturally. On iOS such a button does not exist and a "Done" button is shown. I'm not sure what we should do here, but it's worth some thoughts.
• I created a couple of screenshots on how different mobile OS's deal with pull-down lists. I personally prefer the way windows Phone does it on mobile phones. It's very clear and focused. Also the android version is pretty good. The iOS phone version has a bad UX in my view. Some of the screenshots are in Dutch so here's a short translation: Annuleren = Cancel, Gereed = Done, Vorige = Previous, Volgende = Next, "Item kiezen" = "Select item".

OS	Device	Single select	Multiple select
iOS 6	iPhone 3GS
iOS 9	iPhone 5
iOS 9	iPad
android 5.1.1	Nexus 7
android 5.1.1	Galaxy S6
Windows Phone 8.1	Lumia 640 XL

[koenpunt]

Great summary! :+1:

[petitchamp]

so , nobody would like to add mobile support feature?

[victordit]

Hello Everybody, I need to be able to activate the text search as on the desktop, with the search box for "like". Has anybody already started working on a fix?

Thanks in advance

[SiberMedya]

Chosen (v1.8.7) not support android v9 mobil browser and android chrome