ionic Popover content position issue

Question

I've implemented a popover with number keys on it using this library https://github.com/alvarowolfx/ng-keypad. When I click on an input field, the popover appears. But, sometimes the position of content of popover is not correct. Can you please help me.

Here is my html:

<script id="keypad-popover.html" type="text/ng-template">
  <ion-popover-view class="aiv-keypad">
    <ion-content overflow-scroll=false>
        <div class="ios">
            <ng-keypad on-key-pressed='onKeyPressed'>
                <ng-key ng-repeat='key in aivkeys' ng-key-data='key' ng-key-type='keypad.type'>{{key}}</ng-key>
                <!--<ng-key ng-key-type='keypad.type' ng-key-data="keypad.data">{{keypad.data}}</ng-key>-->
            </ng-keypad>
        </div>
    </ion-content>
  </ion-popover-view>
</script>

In controller,

$ionicPopover.fromTemplateUrl('keypad-popover.html', {
    scope: $scope,
    backdropClickToClose:false
}).then(function(popover) {
    $scope.keypad_popover = popover;
});

Expected,

Sometimes, this problem occurs,

I've temporarily solved it by adding custom css .aiv-keypad .scroll{transform: translate3d(0px, 0px, 0px) scale(1)!important;} — SatheeshCK17, Jan 20 '17 at 07:53

score 0 · Answer 1 · answered Aug 22 '17 at 07:16

While the problem could be described as overflow scrolling, the overflow-scroll=false attribute you're using on <ion-content> means you are explicitly using Ionic scroll, which is to use transform3d() in CSS to implement scrolling. Usually overflow-scroll=false is the default.

If you'd turn overflow-scroll=true the element would use "traditional" overflow-y: auto CSS rule instead of transform3d(). With popovers, this is usually enough to fix the problem you describe.

If not—you can disable element's scrolling altogether with scroll=false attribute.

ionic Popover content position issue

1 Answers1