Vue-material: [MdDatepicker] Positioning error when placeing the datepicker into an dynamic layout item

[kaihempel]

Steps to reproduce

I've placed the datepicker into a responsive formular. The dom element that contains the datepicker has an dynamic percentage width value (like md-large-size-15 or style="width:15%;": The percentage value triggers this issue). When the datepicker dialog will be rendered, the top position will be set on "top: -149px;" and outside the viewport. This issue only exists in version 1.0.0-beta-10.x. In version 1.0.0-beta-8 the datepicker is placed correctly.

You can see the behavior in my CodeSandbox link below.

Which browser?

This can be reproduced with latest version of Vue (2.5.16), Vue-Material 1.0.0-beta-10.2.
Tested in the following Broswers: Google Chrome (Version 66.0.3359.117), latest Safari

What is expected?

The initial calculated height value for the MdDatepickerDialog is wrong. The "setContentStyles" uses the element.offsetHeight value. This value changes after the transition is completed. If the transition hook is changed from @enter to @after-enter the issue is solved. But than the height of the displayed dialog ist to small.

What is actually happening?

The popper.js calculates a wrong top position. The element is placed outside the viewport and expands to the bottom of the viewport: See the CodeSandbox link below.

Reproduction Link

https://codesandbox.io/s/2wro15pjmy

[kaihempel]

In my current project a static pixel based width also triggers this issue. In the demo its working.

[kaihempel]

I've currently working with a workaround: I've override the calculated height of the Datepicker Popover element with a static value (height:230px;).

I've looked for a dynamic solution but didn't found a way: The wrong element height is set by the popper.js lib. The function "getOuterSizes(element)" reads the "offsetHeight" from the current popper element and used that value as height. The browser has at that moment a totally wrong value.
The height is calculated before the popover element will be displayed. As i said above: After the animation the element height is correct.

[simonmaass]

having the same issue - workaround with sass:

//Workaround for dynamic layout with datepicker
.md-datepicker-dialog {
height: 286px;
}

[xxRockOnxx]

@simonmaass that sets the right height and position for the dialog but it doesn't show the buttons on first open.

[simonmaass]

@xxRockOnxx oh yeah - you are right...

//Workaround for dynamic layout with datepicker
.md-datepicker-dialog {
height: 286px;
}
.md-datepicker-body-content {
height: 232px !important;
}

This fixed it for me... seems like the body-content is too high on first open - dont really know why..

[lukaszgodula]

Any plans to fix this issue?

[censuradho]

in the file 'bootstrap-datepicker.js' change the variable 'var top = offset.top - appendOffset.top + bodyOffsets.top;' for 'var top = offset.top - appendOffset.top;'