ons-popover内にons-listを使用していくつかの機能を提供する、ドロップダウンメニューを作っています。 メニューの項目数が多いので、ons-scrollerでスクロールさせたいのですが、スクロールが機能せず、一部分のみしか表示されません。低い解像度の端末でも表示できるよう、スクロール機能を付けたいのですが、どのようにすればよいのでしょうか?
ons.bootstrap();
ons.ready(function(){
onReady();
});
function onReady(){
ons.createPopover("PopOver.html");
}
function PopOverShowBtn(Target){
var options={
animation : "none"
};
PopOver.show(Target,options);
}
<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'>項目1</ons-list-item>
<ons-list-item modifier='tappable'>項目2</ons-list-item>
<ons-list-item modifier='tappable'>項目3</ons-list-item>
<ons-list-item modifier='tappable'>項目4</ons-list-item>
<ons-list-item modifier='tappable'>項目5</ons-list-item>
<ons-list-item modifier='tappable'>項目6</ons-list-item>
<ons-list-item modifier='tappable'>項目7</ons-list-item>
<ons-list-item modifier='tappable'>項目8</ons-list-item>
<ons-list-item modifier='tappable'>項目9</ons-list-item>
<ons-list-item modifier='tappable'>項目10</ons-list-item>
<ons-list-item modifier='tappable'>項目11</ons-list-item>
<ons-list-item modifier='tappable'>項目12</ons-list-item>
<ons-list-item modifier='tappable'>項目13</ons-list-item>
<ons-list-item modifier='tappable'>項目14</ons-list-item>
<ons-list-item modifier='tappable'>項目15</ons-list-item>
</ons-list>
</ons-scroller>
</ons-popover>
</ons-template>