聚合物纸对话位置

在我的应用程序中，我使用聚合物的纸对话元素。对话框的样式始终将其放置在中间，但我希望它在对话框和窗口右侧之间设置最小距离，所以当窗口缩小时，纸对话框不会靠近右侧，比设定的距离。有没有什么办法可以用CSS做，或者我可以用其他技术吗？如果你想指定的对话框，您可能要影响你的纸对话框的产权与固定位置像下面右侧之间的距离聚合物纸对话位置

来源

2015-04-14 Zlatomira Petkova

：

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>

来源

2015-04-25 15:26:11

谢谢你的描述性答案！我设法以不同的方式解决了我的问题，我将通过回答这个问题来展示我的代码，请检查它。 –

然后，这是一个组件，你只需要在类名为'dialog-right-button'的地方放入''中。 –

我设法重新定位的对话框中，如果太靠近窗口的右侧，通过计算窗口的大小，对话框的宽度以及对话框和窗口之间的最小右侧空间。我的场景在窗口的右侧包含一个元素，这将是最小的右侧空间，以便元素不应该重叠。如果有足够的空间，则对话框居中，否则它位置正确。请检查我的代码至极是基于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>

来源

2015-04-26 19:16:47

不错的问题zlatomira，我也面临同样的问题。我可以为你效劳。 –

你也可以做到这一点简单了很多。我只是在论文对话框CSS中声明了所有的边（顶，底，左，右）。在我的情况下，我让他们全部25％，这样我的对话）这个解决方案为我工作。

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

来源

2015-06-19 12:43:12 Bennisan

聚合物纸对话位置

回答

相关问题