javascript - 纸张对话框组件不在屏幕中央

Question

我正在使用 Meteor <template> s 和 polymer 0.5。

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

在我的应用程序中，我在父布局中使用 Meteor 模板。在这些子模板之一中，我还使用了 polymer 对话框。由于该模板不会填充视口(viewport)，并且对话框以其为中心，因此该对话框会丑陋地显示在页面的右下角。如果我启用 layered对话框上的属性，它似乎位于视口(viewport)的中心。但我无法使用该属性，因为它创建了一个影子 DOM，并且破坏了 Meteor 处理 UI 事件的方式(请参阅 the only article I found about that )。

该问题似乎与 this frequently-reported issue 无关.

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

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

Answer 1

添加以下 css 应该可以工作。

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