Вертикальная полоса прокрутки JQueryMobile Autocomplete не работает на Android

Я использую автозаполнение jQuery в своем приложении jQUeryMobile. Он работает отлично. Теперь я пытаюсь показать вертикальную полосу прокрутки для прокрутки списка просматриваемых предметов. Полоса прокрутки отображается на настольных браузерах, но не на устройствах Android. мой CSS выглядит следующим образом:Вертикальная полоса прокрутки JQueryMobile Autocomplete не работает на Android

.ui-автозаполнения { макс высота: 100px; overflow-y: auto; /* предотвращение горизонтальной полосы прокрутки */ overflow-x: hidden; }

Может кто-то помочь, спасибо!

источник

2013-02-18 mercury

Какой браузер вы используете в устройстве Android –

Resolved by using jscrollpane. see below code: 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="css/jquery-ui.css" /> 

    <script type="text/javascript" src="Scripts/jquery.min.js"></script> 

    <script type="text/javascript" src="Scripts/jquery-ui.min.js"></script> 

    <link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" /> 

    <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
      var availableTags = [{ 
       real_value: 1, 
       label: "c++" 
      }, 
       { 
        real_value: 1, 
        label: "ActionScript" 
       }, 
       { 
        real_value: 2, 
        label: "AppleScript" 
       }, 
       { 
        real_value: 3, 
        label: "Asp" 
       }, 
       { 
        real_value: 4, 
        label: "BASIC" 
       }, 
       { 
        real_value: 5, 
        label: "C" 
       }, 
       { 
        real_value: 6, 
        label: "C++" 
       }, 
       { 
        real_value: 7, 
        label: "Clojure" 
       }, 
       { 
        real_value: 8, 
        label: "COBOL" 
       }, 
       { 
        real_value: 9, 
        label: "ColdFusion" 
       }, 
       { 
        real_value: 10, 
        label: "Erlang" 
       }, 
       { 
        real_value: 11, 
        label: "Fortran" 
       }, 
       { 
        real_value: 12, 
        label: "Groovy" 
       }, 
       { 
        real_value: 13, 
        label: "Haskell" 
       }, 
       { 
        real_value: 14, 
        label: "Java" 
       }, 
       { 
        real_value: 15, 
        label: "JavaScript" 
       }, 
       { 
        real_value: 16, 
        label: "Lisp" 
       }, 
       { 
        real_value: 17, 
        label: "Perl" 
       }, 
       { 
        real_value: 18, 
        label: "PHP" 
       }, 
       { 
        real_value: 19, 
        label: "Python" 
       }, 
       { 
        real_value: 20, 
        label: "Ruby" 
       }, 
       { 
        real_value: 21, 
        label: "Scala" 
       }, 
       { 
        real_value: 22, 
        label: "Scheme" 
       } 
      ]; 

      $("#tags").autocomplete({ 
       source: availableTags, 
       open: function(event, ui) { 
        $('.ui-autocomplete') 
         .addClass('scroll-pane') 
         .jScrollPane(); 

        $('.jScrollPaneContainer').css({ 
         'position': 'absolute', 
         'top': ($(this).offset().top + 
        $(this).height() + 5) + 'px', 
         'left': $(this).offset().left + 'px' 
        }); 
       }, 
       close: function(event, ui) { 
        $('.scroll-pane').jScrollPaneRemove(); 
       }, 
       select: function(event, ui) { 
        alert(ui.item.label); 
        alert(ui.item.real_value); 
       } 
      }); 
     }); 
    </script> 

    <style> 
     .ui-autocomplete 
     { 
      max-height: 100px; 
      overflow: auto; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <input type="text" id="tags" /> 
    </div> 
</body> 
</html>

источник

2013-02-18 09:53:07 mercury

установка свойства переполнения в авто попробовать ..

overflow: auto;

источник

2013-02-18 07:17:42

нет это не работает .... когда я пытаюсь прокрутить посмотрел список, то он использует прокрутку страницы вместо просматриваемого списка прокрутки на мобильном телефоне. – mercury

Вертикальная полоса прокрутки JQueryMobile Autocomplete не работает на Android

ответ

Смежные вопросы