search

tamble / jquery-ui-daterangepicker

A JQuery UI based date range picker.
MIT License
184 stars 110 forks source link

Widget is truncated on mobile devices #77

Open markg735 opened 7 years ago

markg735 commented 7 years ago

When using presetRanges the widget is truncated on mobile devices. Tested on:

Without presetRanges the widget will fit on these devices but it seems like things should be wrapped/resized.

zdrive commented 2 years ago

This can be resolved with a little bit of CSS:

@media only screen and (max-width: 420px){
    .comiseo-daterangepicker-presets{
        display: block;
        height: auto;
    }
}

Just make sure this runs after jquery.comiseo.daterangepicker.css has been loaded. Another option is to paste it into the CSS file, somewhere near the end.

My implementation is something like this, in the HTML <head> section:

<link rel="stylesheet" href="css/jquery.comiseo.daterangepicker.css">
<style>@media only screen and (max-width: 420px){.comiseo-daterangepicker-presets{display: block;height: auto;}}</style>

This CSS will stack the presetRanges box on top of the calendar ("display: block;") and reduce the empty space at the end of the presetRanges box ("height: auto;")

Adjust the breakpoint as desired. 420px should cover most mobile devices, but change it if needed.