Popover content position issue

ionic-v1
1

Hi,
I’ve implemented a popover with number keys on it using this library GitHub - alvarowolfx/ng-keypad: A customizable keypad made with Angular.js.
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,
image

Sometimes, this problem occurs,

image
image283×594 8.91 KB

image
image736×249 33.1 KB

Thank you

2

I’ve temporarily solved it by adding custom css

 .aiv-keypad .scroll    {
    transform: translate3d(0px, 0px, 0px) scale(1)!important;
 }