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!
subject: JQuery Autocomplete (older plug-in) list appears very small on mobile devices