• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Bear Bibeault
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Junilu Lacar
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Jj Roberts
  • Tim Holloway
  • Piet Souris
  • Himai Minh
  • Carey Brown
  • salvin francis

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

Ranch Hand
Posts: 2596
Android Firefox Browser Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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!

- Manish
Manish Hatwalne
Ranch Hand
Posts: 2596
Android Firefox Browser Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:
the value of filler advertising in 2020
    Bookmark Topic Watch Topic
  • New Topic