Позиция полимерной бумаги - диалоговое окно

В моей заявке я использую элемент диалога с бумагой полимера. Стиль диалога всегда позиционирует его по центру, но я хочу, чтобы у него было минимальное расстояние между диалоговом и правым окнами, поэтому, когда окно сжимается, диалоговое окно с бумагой не приближается к правой стороне окна , чем заданное расстояние. Есть ли способ, которым я могу это сделать с помощью 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

Позиция полимерной бумаги - диалоговое окно

ответ

Смежные вопросы