diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html index 89f0589..6254010 100644 --- a/polymer-overlay/polymer-overlay.html +++ b/polymer-overlay/polymer-overlay.html @@ -249,11 +249,20 @@ } }, positionTarget: function() { - var computedStyle = getComputedStyle(this.target); - if (this.opened && computedStyle.top === 'auto' && computedStyle.bottom === 'auto') { - this.target.style.top = ((window.innerHeight - this.target.getBoundingClientRect().height) / 2) + 'px'; + if (this.opened) { + // vertically and horizontally center if not positioned + var computedStyle = getComputedStyle(this.target); + if (computedStyle.top === 'auto' && computedStyle.bottom === 'auto') { + this.target.style.top = ((window.innerHeight - this.target.getBoundingClientRect().height) / 2) + 'px'; + } + if (computedStyle.left === 'auto' && computedStyle.right === 'auto') { + this.target.style.left = ((window.innerWidth - this.target.getBoundingClientRect().width) / 2) + 'px'; + } } }, + resetTargetPosition: function() { + this.target.style.top = this.target.style.left = null; + }, renderOpened: function() { this.target.classList.remove('closing'); this.target.classList.add('revealed'); @@ -272,6 +281,9 @@ this.animating = null; this.target.classList.remove('closing'); this.target.classList.toggle('revealed', this.opened); + if (!this.opened) { + this.resetTargetPosition(); + } this.applyFocus(); }, openedAnimationEnd: function(e) {