QUESTION - support mobile landscape mode

[fureweb-com]

Versions

• vue: all
• vue-datetime: all
• luxon: all

Description:

It is not displayed properly on the screen in mobile landscape mode.

Steps To Reproduce:

1. visit https://mariomka.github.io/vue-datetime/ page with your mobile phone
2. and turn to landscape mode your phone

Quetion

Are there any plans to add code to cover this case? or.. Am I missing something to solve this?

[darrenklein]

I've noticed this as well - specifically, the issue that I've seen on my iPhone 7 is that in landscape mode, the header message at the top and the controls at the bottom are cut off. Here's how it looks in 667 x 375:

[darrenklein]

One possible way to address this on your own is to use the CSS transform property to scale the element - something like

@media screen and (orientation:landscape) {
  .vdatetime-popup {
    transform: translate(-50%, -50%) scale(0.75) !important;
  }
}

This seems like it will work for me - note that translate must come before scale, and you'll want to check to make sure this works across browsers.

[fureweb-com]

Thanks. When I check it, it seems to be similar to the setting I am using after patching in my project.

https://goree.kr/x-zgdA

I am also using it by patching it in my project, but I still don't think this is the best way. Is there a better way?