datepicker not responsive and going out of viewport about angular-moment-picker HOT 10 CLOSED

Hi @flyingboy007, in your plunker I just see two inputs in the left side of screen.

from angular-moment-picker.

Yes..Please make it bigger for seeing the issue. It works when the inputs are aligned horizontally as you have seen..but if you make the screen bigger the input will all be laid out vertically and the input pop which is to the end of the screen will go out of the screens visible width
(actually the calender goes out of screen and not the input )

Here is screenshot..as you can see some part of the popup is offscreen. Am I missing something or what might be the fix?

from angular-moment-picker.

Well, to avoid this there are many options:

• enlarge the input, at least at the width of the picker
• create a new property to align the picker to the right
• check whenever the screen size changes and align the picker correctly (using some css3 x-translation)

from angular-moment-picker.

Right and Top align can be done by this piece of css:

/* top */
.moment-picker.top .moment-picker-container { top: auto; bottom: 100%; margin-top: auto; margin-bottom: 4px; }
.moment-picker.top .moment-picker-container:before,
.moment-picker.top .moment-picker-container:after { border: 8px solid transparent; border-bottom: none; top: auto; bottom: -9px; }
.moment-picker.top .moment-picker-container:before { border-top-color: #f0f3f4; border-width: 9px; }
.moment-picker.top .moment-picker-container:after { border-top-color: #fff; margin-top: auto; margin-bottom: 1px; }

/* right */
.moment-picker.right .moment-picker-container { right: 0; margin-left: auto; margin-right: -.5em; }
.moment-picker.right .moment-picker-container:before,
.moment-picker.right .moment-picker-container:after { left: auto; right: 15px; }
.moment-picker.right .moment-picker-container:after { margin-left: auto; margin-right: 1px; }

Now, these are the options we can follow:

• check if the position of the picker fits outside the window and, otherwise, apply one of the styles above
• create two properties to let people choose which class to apply to align the picker on the left or on top
• both of the above

from angular-moment-picker.

Hey @flyingboy007,
what about this plunker? https://plnkr.co/edit/BNtWXh?p=preview 😄

Let me know if everything works, so that I can push changes into a new release ;)

from angular-moment-picker.

Thank you for the update.. This should work now. I will try it and let you know this weekend. Due to this issue I changed my project to useangular-ui-bootrap datepicker which is responsive(even though it wont accept moment date object). I will try to find the commit I done that time and let you know by this weekend. Except the responsive issue this is a great plugin. Thank you.

from angular-moment-picker.

Thank you man. This update is born to make this directive responsive, responding to screen changes every time the picker is opened.

from angular-moment-picker.

I'm going to close this issue, since it can be solved by the latest release v0.5.7.

from angular-moment-picker.

Sorry that I couldnt check on this as planned. Thanks for updating this plugin with this feature.

from angular-moment-picker.

Don't worry man ;)

from angular-moment-picker.