Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set opening direction? #347

Open
T0miii opened this issue Nov 7, 2017 · 13 comments
Open

Set opening direction? #347

T0miii opened this issue Nov 7, 2017 · 13 comments

Comments

@T0miii
Copy link

T0miii commented Nov 7, 2017

Is there a way to tell the datepicker in what direction it should open?
I encounter this problem:
image

@charliekassel
Copy link
Owner

No... I used to measure the available space then open above or below but that messed up the SSR users.
Might be a nice addition to pass this in as a prop though...

@T0miii
Copy link
Author

T0miii commented Nov 8, 2017

could i do this with the wrapper class?

@khflab
Copy link

khflab commented Nov 9, 2017

This is a nice feature that I need just now

@ghost
Copy link

ghost commented Nov 23, 2017

wow, anyone has done this feature?

@d3bgger
Copy link

d3bgger commented Mar 7, 2018

There is also a problem when the input is close to the right edge of the window... then only the half calendar is shown...
This is a big problem for responsive design

@jadell
Copy link

jadell commented Nov 1, 2018

Please consider implementing this. It's possible to get some of the way there with CSS, but the top edge jumps up and down around because the day, month, and year views are different heights.

@briano-jabico
Copy link

I too would like this feature. I've got a datepicker near the bottom of the page, and it adds a scrollbar when opened. Top/right/bottom/left would be great 👍

@robjbrain
Copy link

No... I used to measure the available space then open above or below but that messed up the SSR users.
Might be a nice addition to pass this in as a prop though...

@charliekassel i've tried to look in the commits to find where this code was removed and replicate it but I can't. Could you possibly point it out?

@joelhickok
Copy link

This is the most rated Vue Datepicker component that I have found so far, which is why I cannot believe that opening direction or position has not been resolved. Component still opens off screen. I will add it to my to do list, but it's not a high priority to me, since I'm pretty sure I can just find another component that has this built-in already.

Screenshot 2019-05-07 09 58 07

@sombatos
Copy link

Maybe add an option to display datepicker in the modal like https://mariomka.github.io/vue-datetime/

@HendraPB
Copy link

HendraPB commented Oct 1, 2019

I also need this auto detect feature because I am currently experiencing the same problem, for now I solved it with css overide

.vdp-datepicker__calendar {
width: 230px !important;
}

@hasibweb
Copy link

hasibweb commented Apr 3, 2021

It's working, just use this css.
.vdp-datepicker__calendar {
bottom: 100%;
}

@bezner
Copy link

bezner commented Aug 27, 2021

This is the most rated Vue Datepicker component that I have found so far, which is why I cannot believe that opening direction or position has not been resolved. Component still opens off screen. I will add it to my to do list, but it's not a high priority to me, since I'm pretty sure I can just find another component that has this built-in already.

Screenshot 2019-05-07 09 58 07

If anyone still have issues with that, this simple css helped me a lot.

.vdp-datepicker__calendar { right: 0; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests