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();
},