在AngularJS与mdDialog位置误差

我在Angular Material在我的项目中使用mdDialog，但使用两种不同的方式：在AngularJS与mdDialog位置误差

路1：

$mdDialog.show($mdDialog.confirm() 
    .ok('Submit') 
    .cancel('Cancel'));

这使用默认confirm对话框，将在浏览器中间显示对话框，

它将生成md-dialog-container为：

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 2186px; height: 471px;">

方式2：

var template = '<md-dialog>' 
    + ' <md-dialog-content>' 
    + ' </md-dialog-content>' 
    + ' <md-dialog-actions>' 
    + '  </md-dialog-actions>' 
    + '</md-dialog>'; 

    $mdDialog.show({ 
     template: template, 
     parent: angular.element(document.body), 
     disableParentScroll: false 
    });

它将产生MD-对话框的容器为：

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 471px;">

然而，这一个与top: 0px在md-dialog-container其中显示在页面的顶部，不在浏览器中间。

这两者有什么区别，有没有办法让Way 2像Way 1一样的css风格？谢谢！

演示：

http://codepen.io/anon/pen/amEdYv?editors=1010#0

http://codepen.io/anon/pen/PGEkKE（如果改变角度材料旧版本，如0.7.1，它会正确显示）

来源

2016-10-05 Stephen

我得到同样的'top'两个对话框 - http://codepen.io/camden-kid/pen/ORzrPj?editors=1010#0 –

嗨@camden_kid，感谢您的答复，这是我的http://codepen.io/anon/pen/PGEkKE。如果将角材版本更改为“0.7.1”，则它会正确显示。 – Stephen

@camden_kid，如果添加更多内容并使页面滚动，则可以看到以下错误：http://codepen.io/anon/pen/amEdYv?editors=1010#0 – Stephen

-1

我设法达到同样的通过为md-dialog添加CSS条目导致：

md-dialog { 
    height: auto; 
    vertical-align: central; 
    align-items: center; 
}

实例codepen：http://codepen.io/ther/pen/YGYwBA

来源

2016-10-05 08:56:37 ther

感谢您的回复，但您的解决方案不是正确，请参阅我的演示，并使用最新版本的Angular Material（例如1.0.9），欢呼。 – Stephen

你说得对，谢谢澄清。 – ther

在AngularJS与mdDialog位置误差

回答

相关问题