This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes JQuery Autocomplete (older plug-in) list appears very small on mobile devices Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "JQuery Autocomplete (older plug-in) list appears very small on mobile devices" Watch "JQuery Autocomplete (older plug-in) list appears very small on mobile devices" New topic
Author

JQuery Autocomplete (older plug-in) list appears very small on mobile devices

Manish Hatwalne
Ranch Hand

Joined: Sep 22, 2001
Posts: 2578

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!

TIA,
- Manish
Manish Hatwalne
Ranch Hand

Joined: Sep 22, 2001
Posts: 2578

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!

Solved!!!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: JQuery Autocomplete (older plug-in) list appears very small on mobile devices
 
Similar Threads
Directory Structure JSP & JS
Use Offline cache of browser
What Javascript frameworks have good performance on Android?
Browser compatibility issues
Features in HTML5 that might help a better mobile web pages