I am using older JQuery Autocomplete plug-in (the one shown here - http://view.jquery.com/trunk/plugins/autocomplete/demo/). It is intended to be used for a Mobile app. The plug-in works just fine in the desktop browser. However, on the mobile device the plug-in list of auto-complete suggestions appears very, very small and is not readable at all.
I have tried to use "em" values for font-size and line-height in the CSS. Moreover, I have added this in the CSS -
But no luck!
I already have meta-viewport for my mobile app ad rest of the pages are just fine.
As such, the JQuery plug-in seems to be working, because if I manage to click on one of those small rows - I am getting correct value in my text field. However, autocomplete list is too small to be readable and I am not able to figure out correct CSS to get this working. Any pointers/suggestions would be highly appreciated!
I have got it fixed now. It was rather subtle issue that was not obvious while fixing the problem. I did dig a lot and played a lot with CSS. However, none worked - with hard-coded "height" attribute in the css for each <li> element of JQuery div, I managed to make rows bigger for JQuery auto-complete list - but still the contents of those rows were not showing. However, when I tapped the row - correct value would be substituted in the text box. It was rather puzzling and suggested that probably the AppleWebKit browser was not rendering the contents.
The JQuery auto-complete list on the server had 3000+ <option> elements in it (we need different text for users and some short code for back-end), and AppleWebKit browser refused to show them as JQuery auto-complete rows (Firefox could show them without an issue), so finally I wrote small JS code for JQuery formatItem function -
It extracts the label text of the option element and give it to JQuery auto-complete list. This fixed the problem and I am able to use JQuery auto-complete properly now on the mobile devices. I have tested it with Android & iPhone (our target devices) and found that it works great on both of them!
If you try to please everybody, your progress is limited by the noisiest fool. And this tiny ad: