search

vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.88k stars 1.16k forks source link

MdDatepicker is moved off screen after scrolling #2352

Closed rory-wagner closed 2 years ago

rory-wagner commented 2 years ago

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 2 years ago

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 2 years ago

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