离子弹出内容位置问题

时间:2017-01-13 04:58:18

标签: angularjs ionic-framework ionic-popover

我使用此库https://github.com/alvarowolfx/ng-keypad在其上实现了带有数字键的弹出窗口。 当我单击输入字段时,会出现弹出窗口。但是,有时候弹出内容的位置是不正确的。 你能帮我吗?

这是我的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>

在控制器中,

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

预计,

enter image description here

有时会出现此问题,

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

虽然问题可以描述为溢出滚动,但您在overflow-scroll=false上使用的<ion-content>属性意味着您明确使用Ionic scroll < / em>,这是在CSS中使用transform3d()来实现滚动。通常overflow-scroll=false是默认值。

如果您转过overflow-scroll=true该元素将使用&#34;传统&#34; overflow-y: auto CSS规则而不是transform3d()。使用弹出窗口,这通常足以解决您描述的问题。

如果不是 - 您可以使用scroll=false属性完全禁用元素的滚动。