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:

Making a Wicket web site to look good on Android phone

I wanted my Wicket application to look good on an Android phone. Delving into this task I found two important things:

In many cases you will not be able to show all the information. For me, it was ok to use css media query to have a different css for Android phone. I had to tweak with fonts size and hide some markups.

Inside my html I added the viewport metadata:

<meta name="viewport" content="width=device-width,initial-scale=1"/>  

and I entered my two style sheets:

<!-- for all screens -->
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />

<!--  for Android phone 480px wide or less -->
<link rel="stylesheet" href="css/min-styles.css" type="text/css" 
      media="only screen and (max-width: 480px)"/>    

All the tweaks were added to min-styles.css file.

Modal Windows are a big pain to use. I had to make them show near the top with fixed position like:
 

 .wicket-modal {
        position: fixed !important;
        top:5% !important;
}

Without this, on Webkit browser if you scroll down to click some link which opens a modal, you even won't be able to see the modal (depends on how much scrolling you need). A modal cannot be dragged independently on screen.  So I guess, if you can avoid modals, then do it. If you cannot avoid them, then keep them as small as possible.