Список автозаполнения JQuery (более старый плагин) выглядит очень маленьким на мобильных устройствах - PullRequest
Новая
       37

Список автозаполнения JQuery (более старый плагин) выглядит очень маленьким на мобильных устройствах

0 голосов
/ 02 ноября 2011

Я использую более старый плагин JQuery Autocomplete (показанный здесь - http://view.jquery.com/trunk/plugins/autocomplete/demo/).. Он предназначен для использования в мобильном приложении. Плагин прекрасно работает в браузере настольного компьютера.На мобильном устройстве список плагинов для предложений автозаполнения выглядит очень, очень маленьким и не читаемым вообще.

Я пытался использовать значения «em» для размера шрифта и высоты строки вCSS. Более того, я добавил это в CSS - 

@viewport {
  width: device-width;
}

Но не повезло!: (

У меня уже есть мета-область просмотра для моего мобильного приложения, остальные страницы простохорошо. 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Таким образом, плагин JQuery, похоже, работает, потому что, если мне удастся щелкнуть одну из этих маленьких строк - я получу правильное значение в своем текстовом поле. Однако автозаполнениесписок слишком мал, чтобы его можно было прочитать, и я не могу определить правильный CSS, чтобы это работало. Любые указатели / предложения будут высоко оценены!

TIA, - Manish

Ответы [ 2 ]

0 голосов
/ 11 ноября 2011

Я исправил это сейчас.Это был довольно тонкий вопрос, который не был очевиден при решении проблемы.Я много копал и много играл с CSS, включая некоторые из предложенных здесь @sandeep.Однако ничего не получалось - с жестко заданным атрибутом «высота» в css для каждого элемента

элемента JQuery div мне удалось увеличить строки для списка автозаполнения JQuery - но содержимое этих строк все равно не отображалось.Однако, когда я коснулся строки - правильное значение будет подставлено в текстовое поле.Это было довольно странно и предположило, что, вероятно, браузер AppleWebKit не рендерит содержимое.

Список автозаполнения JQuery на сервере содержал 3000+

элементов (нам нужен разный текст для пользователей и некоторый короткий код для серверной части), и браузер AppleWebKit отказался показывать их как JQueryавтозаполнение строк (Firefox может показывать их без проблем), поэтому, наконец, я написал небольшой JS-код для JQuery formatItem function - 
        //needed as option list is not shown by AppleWebKit safari browser
    formatItem: function(item, position, length, search){
        var name ="";       
        var str = "" + item;            
        var start = str.indexOf('">') + '">'.length;
        var end = str.lastIndexOf("</");
        name = str.substring(start,end);
        return name; 
    }

Извлекает текст метки элемента optionи передать его в список автозаполнения JQuery.Это решило проблему, и теперь я могу правильно использовать автозаполнение JQuery на мобильных устройствах.Я протестировал его на Android и iPhone (наши целевые устройства) и обнаружил, что он отлично работает на обоих из них!

Решено !! : -)

0 голосов
/ 02 ноября 2011

Может быть, вам нужно определить свойство css отдельно для мобильного устройства.Например: 

@media all and (max-devide-width: 480px){
    .head{  
       width:200px;
           height:50px;
     } 
}
...