search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.37k stars 850 forks source link

Popover displacement bug #908

Open nikolaypronchev opened 3 years ago

nikolaypronchev commented 3 years ago

v-calendar 2.3.0 vue 2.6.11 browser Google Chrome 91.0.4472.77 (x64) Description If fixed positioned datepicker is located inside container...

position: absolute;
overflow: hidden;
left: 200px; //any shift

...a popover position bug occurs. When you click the month selection button, the popup that appears is shifted (No. 1 in the image). After hovering the cursor, the window returns to the correct position (No. 2 in the image).

bug

https://codesandbox.io/s/laughing-shape-g5okd?file=/src/App.vue Hover input -> Click month name -> Popover is shifted right -> Hover popover -> It shifts to correct position

UPD Even after hovering, it is not correctly positioned

Chernavskikh commented 3 years ago

++ 1 for this bug

temporary solution: 

.vc-popover-content-wrapper.is-interactive .vc-popover-content-wrapper {
  transform: translate3d(43px, 38px, 0) !important;
}
nikolaypronchev commented 3 years ago

temporary solution:

.vc-popover-content-wrapper.is-interactive .vc-popover-content-wrapper {
  transform: translate3d(43px, 38px, 0) !important;
}

Yeah, this works fine. Seems like it's not Popper.js issue, as it correctly calculates popover position in same situation