Fix iron-dropdown padding covering the clear button

vaadin · Jun 8, 2016 · e6a3adb · e6a3adb
1 parent 15402fb
commit e6a3adb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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();
       },