纸对话组件不在屏幕上居中

我使用流星<template> s和聚合物0.5。纸对话组件不在屏幕上居中

当我在填充整个屏幕的元素中使用<paper-dialog>时，对话框出现在屏幕中心，因为我认为它使用了父元素的边界框。

在我的应用程序中，我在父布局中使用流星模板。在其中一个子模板中，我也使用了聚合物对话框。由于此模板未填充视口，并且由于对话框居中，因此对话框将隐藏在页面的右下角。如果我在对话框中启用了layered属性，它似乎以视口为中心。但是我不能使用这个属性，因为它创建了一个阴影DOM，它打破了Meteor处理UI事件的方式（请参阅the only article I found about that）。

该问题似乎并不涉及this frequently-reported issue。

在聚合物1.0文档中，我可以看到对话框对象有fit，refit和resetFit方法可以直观地将对话框放入您选择的容器中。这似乎是我的问题的解决方案，但这些方法似乎不存在于v0.5中。

如何设置<paper-dialog>的容器？

来源

2015-11-27 Morgan Touverey Quilling

如果可能的话，切换到最新的聚合物... –

有人在我的团队人试图升级聚合物的一种一天，但应用程序的UI爆炸无处不在。我会尽力在我身边这样做，但优先事项是保持Polymer 0.5尊重最后期限:) –

祝你好运0.5！ :) –

添加下面的CSS应该可以工作。

html /deep/ .size-position { 
    position: fixed; 
    top: 50%; 
    right: 50%; 
    transform: translate(-50%, -50%); 
}

来源

2015-11-28 11:21:56

谢谢，但'/ deep /'选择器不被Firefox支持，并且已被弃用。我正在寻找一种不使用影子DOM的浏览器兼容性和流星兼容性原因的长期解决方案。 –

纸对话组件不在屏幕上居中

回答

相关问题