图纸对话框组件不在屏幕中央

paper-dialog component is not centered on screen

本文关键字：屏幕 对话框 组件      更新时间：2023-09-26

我使用的是Meteor <template> s和Polymer 0.5。

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

在我的应用程序中，我在父布局中使用Meteor模板。在其中一个子模板中，我还使用了"聚合物"对话框。由于此模板不会填充视口，并且对话框位于视口的中心，因此对话框会隐藏在页面的右下角。如果在对话框上启用layered属性，则它似乎位于视口的中心。但我不能使用该属性，因为它创建了一个影子DOM，并且破坏了Meteor处理UI事件的方式（请参阅我找到的唯一一篇关于这方面的文章）。

这个问题似乎与这个经常被报道的问题无关。

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

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

添加以下css应该可以。

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