16714


ons-popover内にons-listを使用していくつかの機能を提供する、ドロップダウンメニューを作っています。 メニューの項目数が多いので、ons-
scrollerでスクロールさせたいのですが、スクロールが機能せず、一部分のみしか表示されません。低い解像度の端末でも表示できるよう、スクロール機能を付けたいのですが、どのようにすればよいのでしょうか？

[code]

    ons.bootstrap();
    ons.ready(function(){
      onReady();
    });
    
    function onReady(){
      ons.createPopover("PopOver.html");
    }
    
    function PopOverShowBtn(Target){
      var options={
        animation : "none"
      };
      PopOver.show(Target,options);
    
    }
[/code]

[code]

    <ons-navigator var="app_navi">
    
      <ons-page id="TopPage">
        <ons-button onclick="PopOverShowBtn(this);">ポップオーバー表示</ons-button>
      </ons-page>
    </ons-navigator>
    
    <ons-template id="PopOver.html">
      <ons-popover var="PopOver" cancelable style='width:300px'>
        <ons-scroller style="width:100%;height:400px;">
          <ons-list style="text-align:center">
            <ons-list-item modifier='tappable'>項目１</ons-list-item>
            <ons-list-item modifier='tappable'>項目２</ons-list-item>
            <ons-list-item modifier='tappable'>項目３</ons-list-item>
            <ons-list-item modifier='tappable'>項目４</ons-list-item>
            <ons-list-item modifier='tappable'>項目５</ons-list-item>
            <ons-list-item modifier='tappable'>項目６</ons-list-item>
            <ons-list-item modifier='tappable'>項目７</ons-list-item>
            <ons-list-item modifier='tappable'>項目８</ons-list-item>
            <ons-list-item modifier='tappable'>項目９</ons-list-item>
            <ons-list-item modifier='tappable'>項目１０</ons-list-item>
            <ons-list-item modifier='tappable'>項目１１</ons-list-item>
            <ons-list-item modifier='tappable'>項目１２</ons-list-item>
            <ons-list-item modifier='tappable'>項目１３</ons-list-item>
            <ons-list-item modifier='tappable'>項目１４</ons-list-item>
            <ons-list-item modifier='tappable'>項目１５</ons-list-item>
    
          </ons-list>
        </ons-scroller>
      </ons-popover>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-09-14T01:06:27.080
16578
2015-09-17T12:31:18.343
11105
question
monaca onsen-ui
ons-popover 内で ons-scrollerが使えない


質問に記載してあるコードで手元（プレビューとiOS版のデバッガ）ではスクロールが確認できましたが、それ以外の環境でのみ発生する事象でしょうか？

もしかしたらファイル構成やコードの記載場所等が問題の改善に繋がるかもしれないので、こちらで動作確認したコードを下記に記載します。

index.html

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/popover.js"></script>
        <script>
        ons.bootstrap();
        ons.ready(function(){
          onReady();
        });
        </script>
    </head>
    <body>
      <ons-navigator var="app_navi">
        <ons-page id="TopPage">
          <ons-button onclick="PopOverShowBtn(this);">ポップオーバー表示</ons-button>
        </ons-page>
      </ons-navigator>
    </body>
    </html>
    
[/code]

popover.js

[code]

    function onReady(){
      ons.createPopover("PopOver.html");
    }
    
    function PopOverShowBtn(Target){
      var options={
        animation : "none"
      };
      PopOver.show(Target,options);
    }
    
[/code]

Popover.html

[code]

    <ons-popover var="PopOver" cancelable style='width:300px'>
      <ons-scroller style="width:100%; height:300px;">
        <ons-list style="text-align:center">
          <ons-list-item modifier='tappable'>項目１</ons-list-item>
          <ons-list-item modifier='tappable'>項目２</ons-list-item>
          <ons-list-item modifier='tappable'>項目３</ons-list-item>
          <ons-list-item modifier='tappable'>項目４</ons-list-item>
          <ons-list-item modifier='tappable'>項目５</ons-list-item>
          <ons-list-item modifier='tappable'>項目６</ons-list-item>
          <ons-list-item modifier='tappable'>項目７</ons-list-item>
          <ons-list-item modifier='tappable'>項目８</ons-list-item>
          <ons-list-item modifier='tappable'>項目９</ons-list-item>
          <ons-list-item modifier='tappable'>項目１０</ons-list-item>
          <ons-list-item modifier='tappable'>項目１１</ons-list-item>
          <ons-list-item modifier='tappable'>項目１２</ons-list-item>
          <ons-list-item modifier='tappable'>項目１３</ons-list-item>
          <ons-list-item modifier='tappable'>項目１４</ons-list-item>
          <ons-list-item modifier='tappable'>項目１５</ons-list-item>
        </ons-list>
      </ons-scroller>
    </ons-popover>
    
[/code]


CC BY-SA 3.0
2015-09-14T02:25:32.887
16579
2015-09-14T06:14:30.567
2015-09-14T06:14:30.567
3516
3516
16578
answer


自己解決できましたので、要点をまとめておきます。

問題点（調査中に発見した問題点を含む）  
・Ons-Popover内のOns-Scrollerが機能しない。  
・コンソール画面に「Onsen UI require jqLite. Load jQuery after loading AngularJS to fix
this error. jQuery may break Onsen UI
behavior.」と警告があった。(jQueryとOnsenUI(AngularJs)の併用、ロードの順番に関する警告)

対処法  
・loader.jsファイルの削除  
・必要なJSコンポーネントの再インストール

これにより、loader.jsが再作成され、警告の解消、Scrollerも機能するようになりました。

※loadr.jsの働きを良く理解していないため、削除によって及ぶ影響があるのかもしれません。乱暴な方法かもしれませんが、今のところ問題なく（ビルドも試しました）動作しています。


CC BY-SA 3.0
2015-09-17T12:31:18.343
16714
2015-09-17T12:31:18.343
11105
16578
answer