Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Dialog incorrect position when using infinite scroll list

  • It seems like there is a bug with the display of the dialog when activating it from a button created using an infinite scrolling list. It works fine for the first item(s) when no scrolling is done, but as we start to scroll down in the list, the popup is displayed off the top of the page. For obvious reasons this isnt expected, has anyone faced this issue and have a solution?


    A tidbit of the code:

    <div ng-controller=“ViewController”>
    <ons-list-item ons-lazy-repeat=“MyDelegate”>
    <img ng-src="{{fetchImage(item)}}" width="{{item.width}}"/>
    <ons-row style=“padding-left:15px”>
    <span class=“toolbar-button–quiet navigation-bar__line-height”>
    <i class=“ion-ios-upload-outline” ng-click=“showDialog(item)”></i>

    <ons-alert-dialog var=“dialog” cancelable>

      <ons-list-item modifier="tappable">
      <ons-list-item modifier="tappable">
      <ons-list-item modifier="tappable">



  • Currently the dialog is generally attached to the body (even though we may change that really soon), therefore it’s css is supposed to be just from the top. Generally it’s supposed to be from the top of the body. Later since we have pages which take 100% height and are scrollable everything works fine. We are doing these hacks because iOS safari has a buggy implementation of position: fixed and we’re trying not to use it.

    Probably you can fix your problem by adding something like position: fixed to the style of the dialog, if you don’t care about iOS that much. Your other options are:

    • using ons.createAlertDialog (or just add the dialog to the body yourself)
      If that’s already the case, then make sure that your other content is inside an ons-page.
    • using ons-modal instead - it’s supposed to move itself to the correct location. (again your content should be inside an ons-page, though if you have an infinite list maybe that’s already the case).
    • wait until the behaviour of alert-dialog gets changed - which will probably be relatively soon.

    If none of these solutions worked for you please tell me and I will look into it once again :)