Question

在我的应用程序中，我正在使用聚合物的纸张对话元素。对话框的样式总是将它放在中心位置，但是我希望它在对话框和窗口右侧之间设置最小距离，所以当窗口缩小时，纸张对话框不会被取消比设定距离靠近右侧。有什么方法可以用CSS做，或者我可以使用其他技术吗？

Answer 1

如果要指定对话框与右侧之间的距离，可能需要影响具有固定位置的纸质对话框的属性，如下所示：

html /deep/ .dialog-right-position {
  position: fixed;
  top: 10px;
  right: 10px;
}

然后你只需要用相同的css类名声明你的元素。

<paper-dialog heading="Custom Dialog Positioning" class="dialog-right-position">
  <p>well right positioned paper dialog :) ! </p>
</paper-dialog>

如果你需要一个有效的例子，那么它就是：

<!doctype html>
<html>
<head>
  <title>paper-dialog-alignment </title>
  <script src="webcomponentsjs/webcomponents.js"></script>
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-dialog/paper-dialog.html" rel="import">

  <style shim-shadowdom>
    html /deep/ .dialog-right-position {
      position: fixed;
      top: 10px;
      right: 10px;
    }

    html /deep/ .dialog-right-position::shadow #scroller {
      width: 500px;
      height: 350px;
    }
  </style>
</head>
<body unresolved>
    <template is="auto-binding">
      <section on-tap="{{toggleRightDialog}}">
        <button>
          Display dialog    
        </button>

        <paper-dialog heading="Custom Dialog Positioning" class="dialog-right-position">
          <p>well right positioned paper dialog :) ! </p>
        </paper-dialog>
      </section>
    </template>

    <script>
      var scope = document.querySelector('template[is=auto-binding]');
      scope.toggleRightDialog = function(e) {
        if (e.target.localName == 'button') {
            var d = e.target.nextElementSibling;
            if (d) {
                d.toggle();
            }
        }
      };
    </script>
</body>
</html>

Answer 2

我设法重新定位对话框，如果它太靠近窗口的右侧，通过计算窗口的大小，对话框的宽度以及对话框和窗口之间的最小右边空格。我的场景包括窗口右侧的元素，它将是最小的右侧空间，因此该元素不应重叠。如果有足够的空间，则对话框居中，否则位置正确。请检查我的代码，该代码基于jérémy Darchy：

的示例

<!doctype html>
<html>
<head>
  <title>paper-dialog-alignment </title>
  <script src="webcomponentsjs/webcomponents.js"></script>
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-dialog/paper-dialog.html" rel="import">

  <style shim-shadowdom>

    html /deep/ .dialog-right-position::shadow #scroller {
      width: 500px;
      height: 350px;
    }

    html /deep/ #blueDiv {
      float: right;
      background: blue;
      width: 200px;
      height: 100vh;
    }
  </style>
</head>
<body unresolved>
    <template is="auto-binding">
      <section on-tap="{{toggleDialog}}">
        <button>
          Toggle dialog    
        </button>

        <paper-dialog id="dialog" heading="Custom Dialog Positioning" class="dialog-right-position">
          <p>not overlaping the blue element, centered when possible </p>
        </paper-dialog>

        <div id="blueDiv"></div>

      </section>
    </template>

    <script>

      var scope = document.querySelector('template[is=auto-binding]');

      window.onresize = function(event) {
        var dialog = document.querySelector("html /deep/ #dialog");
        scope.repositionPaperDialog(dialog);
      };

      scope.toggleDialog = function(e) {
        this.$.dialog.toggle();
      };

      // fired event from the core-overlay element, when the dialog opens
      this.addEventListener("core-overlay-position", function(e) {
        scope.repositionPaperDialog(e.detail.target);
      });

       scope.repositionPaperDialog = function(dialog) {

          if ((document.body.clientWidth/2) < (dialog.offsetWidth/2 + this.$.blueDiv.offsetWidth)) {
            // dialog overlaps the blue element, set the right position of the dialog
            dialog.dimensions.position.h = 1;
            dialog.style.right = "200px";
            dialog.style.left = "";
          } else {
            // center dialog
            dialog.style.left = "";
            dialog.style.right = "";
            dialog.dimensions.position.h = 0;
          }
        };
    </script>
</body>
</html>

Answer 3

你也可以做得更简单。我刚刚在纸对话框CSS中声明了所有的边（顶部，底部，左边，右边）。在我的情况下，我把它们都做了25％，这样我的对话框）这个解决方案对我有用。

paper-dialog {
  position: fixed;
  top: 25%;
  left: 25%;
  bottom: 25%;
  right: 25%;
  margin: 0px;
}

聚合物纸对话位置

3 个答案: