0

jQUeryMobileアプリケーションでjQueryオートコンプリートを使用しています。それは完璧に動作します。今、私は検索されたアイテムのリストをスクロールするために垂直スクロールバーを表示しようとしています。スクロールバーはデスクトップブラウザには表示されますが、Androidデバイスには表示されません。私のCSSは次のようになります：

.ui-オートコンプリート{最大高さ：100px; オーバーフロー-y：自動; /*水平スクロールバーを防止します*/overlay-x：非表示; }

誰か助けてもらえますか、ありがとう！

4

2 に答える 2

0

オーバーフロープロパティをautoに設定してみてください。

overflow: auto;
于 2013-02-18T07:17:42.690 に答える
0 
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-18T09:53:07.137 に答える