ionic Popover 内容位置问题答案

【问题标题】：ionic Popover content position issueionic Popover 内容位置问题
【发布时间】：2017-05-28 09:57:18
【问题描述】：

我已经使用这个库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;
});

预期，

有时会出现这个问题，

【问题讨论】：

我通过添加自定义 css 暂时解决了它 .aiv-keypad .scroll{transform: translate3d(0px, 0px, 0px) scale(1)!important;}

标签： angularjs ionic-framework ionic-popover

【解决方案1】：

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

如果您转为overflow-scroll=true，该元素将使用“传统”overflow-y: auto CSS 规则而不是transform3d()。对于弹出框，这通常足以解决您描述的问题。

如果没有，您可以使用 scroll=false 属性完全禁用元素的滚动。

【讨论】：