Polymer paper-dialog position

问题

In my application I am using polymer's paper-dialog element. The dialog's styles always position it in the center, but I want it to have a minimum distance set between the dialog and the right side of the window, so when the window shrinks, the paper-dialog won't get closer to the right side, than the set distance. Is there any way that I can do it with CSS, or shall I use some other technic?

回答1:

if you want to specified a distance between the dialog and the right side you might want to affect the property right of your paper-dialog with a fixed position like following :

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

then you just declare your element with the same css class name of course.

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

and if you need a working example, here it is :

<!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>

回答2:

I managed to reposition the dialog,if it gets too close to the right side of the window, by calculating window's size, the dialog's width and the minimum right space between the dialog and the window. My scenario includes an element at the right side of the window, which will be the minimum right space, so that element shouldn't be overlapped. If there is enough space, the dialog is centered, otherwise it is right positioned. Please, check my code wich is based on the example of 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>

回答3:

You could also do it a lot simpler. I just declared all the sides (top, bottom, left, right) in the paper-dialogs CSS. In my case, I made them all 25%, so that my dialog)This solution worked for me.

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

来源：https://stackoverflow.com/questions/29622789/polymer-paper-dialog-position

标签

html

css

dom

polymer