聚合物紙對話位置

在我的應用程序中，我使用聚合物的紙對話元素。對話框的樣式始終將其放置在中間，但我希望它在對話框和窗口右側之間設置最小距離，所以當窗口縮小時，紙對話框不會靠近右側，比設定的距離。有沒有什麼辦法可以用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

聚合物紙對話位置

回答

相關問題