Detect whether browser shows <select multiple> as modal dialog

Question

Is there any way to use JavaScript to detect whether a given browser renders a focused <select multiple> element as a popup or solely as an inline box?

On some platforms, such as the Android Browser and iOS Safari, the use of a popup can be detected by comparing the heights of, say,

<select multiple>
  <option>a</option>
  <option>a</option>
  <option>a</option>
  <option>a</option>
  <option>a</option>
<select>

and

<select multiple>
  <option>a</option>
<select>

The heights are the same because the <select>s get reduced to a single box with a dropdown button. But on other devices, such as the Playbook, this test would give a false negative, since the Playbook browser renders expanded select lists and shows popups when they're clicked.

Can anyone think of a reliable way to determine whether a native select popup is shown?

Meadow

Why would you want to detect this? How to render such a component is up to the client, not you. Unless you have a very specific reason, you should leave that behavior alone. – Ache

I'm working on a project using jQuery Mobile and trying to come up with an alternative to jQuery Mobile's presentation of select menus. Their native approach to showing the select options doesn't work in browsers that don't show popups, while the two styled versions have rather poor performance. I'd like to be able to always use the native control, using either a native popup or a fake overlay. – Meadow

Pay your attention to size option of select. If this is '1' browser may render the element as an inline element. – Phraseology

For something like this, I'd probably detect the browser itself and create specific conditions for each browser (Android, iOS, WebOS, etc). – Chan

Agreed with masedesign. You could set some regexes to get browser and os, and then hardcode different behaviour, but everytime you try to mix native controls and rendered controls you will be in trouble. A classic example would be AWT, Swing, SWT. – Kikuyu

Answer 1

It looks like masedesign is leading toward this, but I'm going to go one step further:

Perhaps detect mobile browsers vs non-mobile browser (eg. RIM, Android, iOS, etc VS FF, Chrome, Opera, Safari, IE, etc)

Hectograph

Answer 2

jQuery Mobile Beta 2 gives you the option to use custom menus instead of the native ones:

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/selects/index.html

Fourlegged

This has been an option since their first alpha release. As I mentioned in a comment above, though, the problem is that large custom menus have rather poor performance on even the fastest mobile devices (e.g. iPad 2), so I'm trying to come up with some sort of hybrid native/custom alternative. – Meadow

Answer 3

As of 2021, using pointer media features (see https://mcmap.net/q/42229/-detecting-that-the-browser-has-no-mouse-and-is-touch-only) is probably one of the more reliable ways to detect whether the browser would likely open select in a modal.

Nuthouse