From e6a3adb51062fdd45d3bad806769d3bf2ff0848e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Teemu=20Po=CC=88ntelin?= <teemu@vaadin.com>
Date: Tue, 24 May 2016 09:40:32 +0300
Subject: [PATCH] Fix iron-dropdown padding covering the clear button

---
 test/dropdown.html      |  2 +-
 vaadin-date-picker.html | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/test/dropdown.html b/test/dropdown.html
index b52abecf..cee28a9c 100644
--- a/test/dropdown.html
+++ b/test/dropdown.html
@@ -94,7 +94,7 @@
             var fullscreen = viewportWidth < 520;
 
             expect(isFullscreen(datepicker)).to.equal(fullscreen);
-            expect(dropdown.verticalOffset).to.equal(fullscreen ? 0 : datepicker.clientHeight - 10);
+            expect(dropdown.style.marginTop).to.equal((fullscreen ? 0 : datepicker.clientHeight + 2) + 'px');
             expect(dropdown.positionTarget).to.equal(fullscreen ? document.documentElement : datepicker);
             done();
           });
diff --git a/vaadin-date-picker.html b/vaadin-date-picker.html
index 86795d79..b7101002 100644
--- a/vaadin-date-picker.html
+++ b/vaadin-date-picker.html
@@ -68,10 +68,6 @@
         display: block;
       }
 
-      #dropdown:not([fullscreen]) {
-        padding: 12px 0 10px 0;
-      }
-
       #overlay {
         height: 100vh;
         width: 420px;
@@ -404,7 +400,6 @@
 
       _updateAlignmentAndPosition: function() {
         var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-        this.$.dropdown.verticalOffset = this._fullscreen ? 0 : this.clientHeight - 10;
         this.$.dropdown.positionTarget = this._fullscreen ? document.documentElement : this;
 
         var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
@@ -414,6 +409,16 @@
         this.$.dropdown.verticalAlign = bottomAlign ? 'bottom' : 'top';
         this.$.dropdown.horizontalAlign = this._fullscreen ? null : rightAlign ? 'right' : 'left';
 
+        // Previously used verticalOffset property has been recently deprecated
+        // in favor of using top and bottom margins.
+        if (this._fullscreen) {
+          this.$.dropdown.style.marginTop = 0;
+          this.$.dropdown.style.marginBottom = 0;
+        } else {
+          this.$.dropdown.style.marginTop = (bottomAlign ? 10 : this.clientHeight + 2) + 'px';
+          this.$.dropdown.style.marginBottom = (bottomAlign ? this.clientHeight : 10) + 'px';
+        }
+
         this.$.dropdown.refit();
       },