HTML Multiple select and Android incompatibilities

Do you have a multiple select on your web site? Then you should see how ugly it looks on Android platform. Not only it looks different, but it also behaves differently.

In Wicket there is a Palette component (two multiple selects) which allows to select some options from a list to another list. You can add / remove selected options using two buttons ">" and "<".

 

I extended this component with some new buttons ">>" and "<<" to add all and remove all elements.

On Android platform:

• the multiple select looks like a simple select without any option in it
• select does not even has an arrow to indicate you are looking at a list
• even if you make its height bigger you cannot see all the possible options inside a multiple select; (it is just an empty big space!)
• when you click on it you can select what options you want
• after selection you can see only the first selected option

Because all of these, there is also no need for "add all" and "remove all" buttons (even if it does the operation, not being able to see what are all options makes it unusable).

When I first re-sized the browser to become with less than 480 px width, I saw the result ok . I just hid "add all" and "remove all" buttons.

But when I looked on Android emulator I saw another story.

First I modified the css to show the two buttons inline.  The re-sized browser looks like:

And then I added the arrow icon by myself (it will have impact only on Android):

.paletteContainer table.palette td.pane select,
.paletteContainer table.palette td.pane select[size="0"],
.paletteContainer table.palette td.pane select[size="1"] {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A
/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.8em;

  }

The result was much better:

When you click on select you see Android selection dialog:

After selecting, the first selected option is seen: