search

nathanreyes / v-calendar

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

Datepicker is not appended to body #232

Open antoniogiroz opened 5 years ago

antoniogiroz commented 5 years ago

Hi, I'm testing some datepickers and I like this one more that others, but I've noted when I use a container with overflow hidden, the popup is hidden as well.

Here en example with other datepickers https://codesandbox.io/s/o5joqz51x5

Vue2DatePicker and ElementUI DatePicker work fine.

Is it posible appending datepicker popup to the body element? Thanks!

nathanreyes commented 5 years ago

I've converted this plugin to using popper.js and for all popovers. It doesn't append to body by default, but I'm exploring ways to accomplish that.

antoniogiroz commented 5 years ago

That's great! maybe with a prop? or why not by default?

doctorsirius commented 5 years ago

The problem with default is what happens when you scroll a container with its own scroll area with the calendar on it, if you append to body and scroll that area the calendar sticks to the position since it depends on the body and you are not scrolling the body. So maybe it's better through a prop that let you decide to which parent append the calendar.

irfandyj commented 5 years ago

Hi @algil, I seem to have the same problem as you do, have you solve your problem? Or maybe a workaround for now? Thanks!

antoniogiroz commented 5 years ago

Not yet @jippy89. I continued working with other components

nathanreyes commented 5 years ago

@jippy89 @algil @doctorsirius

In 1.0.0-beta.21, there is now a positionFixed option for the popover prop object. I think this could address the issues for battling containers with overflow: hidden.

Reference example

mreduar commented 1 year ago

The problem with default is what happens when you scroll a container with its own scroll area with the calendar on it, if you append to body and scroll that area the calendar sticks to the position since it depends on the body and you are not scrolling the body. So maybe it's better through a prop that let you decide to which parent append the calendar.

It does not always work, in some situations the picker appears in a completely different location. But I appreciate your feedback, it solved the problem somewhere in my app.