为什么 Vue Material 对话框容易移出屏幕？

Question

我正在使用 Vue Material 的对话框 (https:/vuematerial.iocomponentsdialog。). 如果我按照链接打开页面上的第一个自定义对话框，它就会移动到屏幕的左上方，而且我只能看到对话框的一部分。同样的情况也发生在我的Vue应用中的对话框上，而且似乎没有CSS将它移到屏幕中央。我正试图在对话框中显示一个交互式地图。有没有什么方法可以让我的Vue对话框保持在浏览器窗口的中心位置，这样我就可以真正看到所有的对话框并使用它？

我的对话框有以下标记。

    <md-dialog :md-active.sync="showDialog">
      <md-dialog-title>Map</md-dialog-title>

      <interactivemap :lat="lat" :lon="lon" />

      <md-dialog-actions>
        <md-button class="md-primary" @click="showDialog = false">Close</md-button>
      </md-dialog-actions>
    </md-dialog>

Answer 1

在我的浏览器中，它的工作原理是一样的：在文档和代码沙盒中都是如此。

当它离开屏幕时，内部的div(带类的) .md-dialog > .md-dialog-container)具有 transform: translate(-50%,-50%) scale(1);，把它推掉。

编辑：是的，每个对话框都有这个CSS错误。试试覆盖它，或者通知开发人员。

Answer 2

.md-dialog-container {
  transform: translate(0%,0%) scale(1) !important;
}

修改后的答案是 https:/stackoverflow.comusers13602136zed我的对话现在很好地放在了屏幕的中央