vuematerial/vue-material

MdDatepicker is moved off screen after scrolling

rory-wagner opened this issue · 2 comments

rory-wagner commented

Steps to reproduce

  1. Make sure you are able to scroll where the MdDatepicker is contained.
  2. Open the MdDatepicker
  3. Close the MdDatepicker
  4. Scroll away and back to it
  5. Reopen the MdDatepicker

Which browser?

This was seen on Chrome, Windows 10, Vue 2.6.10, and both Vue Material 1.0.0-beta-11 and 1.0.0-beta-15.

What is expected?

The MdDatepicker dialog is supposed to display in the same place as the first time it is opened. (shown below)

date-onscreen (1)

What is actually happening?

The MdDatepicker dialog is sent off screen/in an unexpected place to the right and below the original opening position. (shown below)

date-offscreen (1)

payamnaghdy commented

Hello, I had the same problem and also a problem with some screen sizes I added a prop to the MdDatepicker called placement you can change the placement to 'bottom-end' and fixes your issue.

I also provided steps to patch it until next release

marqbeniamin commented

Hi @rory-wagner, thank you for using our framework. This issue is solved on the dev branch! 🙏
Thank you @payamnaghdy for help 🔥