为什么 Vue Material 对话框倾向于移出屏幕？

Question

我正在使用 Vue Material (https://vuematerial.io/components/dialog) 的对话框。如果我按照 link 打开页面上的第一个自定义对话框，它会移动到我屏幕的左上角，我只能看到对话框的一部分。我的 Vue 应用程序中的对话框也是如此，似乎没有 CSS 将其带到屏幕中央。我正在尝试在对话框中显示交互式地图。有没有什么方法可以让我的 Vue 对话框保持在浏览器的中央 window 这样我就可以真正看到并使用它？

我的对话框有以下标记：

    <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（与class .md-dialog > .md-dialog-container）有transform: translate(-50%,-50%) scale(1);，推开它。

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

Answer 2

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

修改了 https://whosebug.com/users/13602136/zed 给出的答案，现在我的对话很好地位于屏幕中央

为什么 Vue Material 对话框倾向于移出屏幕？

Why do Vue Material dialogs tend to move off screen?

vue.js

vue-component

vue-material

vue-cli