2

when working with materialize datepicker, Ive been facing an issue where the datepicker wouldn't occupy the center of the screen, while this code works on android devices, this doesn't work on a physical iPhone device.

any help would be appreciated.

Here is the code:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
    name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <title>Kidzania Ticket Booking</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.css" />
    </head>
    <body>
    <form role="form">
    <div class="formGroup">
    <input type="text" class="datepicker" />
    </div>
    </form>
    <script src="assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
    </body>
    <script>
    $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    closeOnSelect: false // Close upon selecting a date,
    });
    </script>
    </html>

enter image description here

vj.madamala7
  • 109
  • 9

1 Answers1

1

you can use media queries to detect the device width and then center the parent element of the date-picker

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 


.datepicker{

        /* STYLES GO HERE */

  }
}

update: i looked at their website and found out that the reason is that on focus of the date-picker the page will zoom in a little if you zoom out with your fingers on iPhone you can see it is still center

if you want to disable this behavior you can find your answer here:

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

adding this to head of html worked for me 

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

update 2

seems that this is a good workaround too : https://stackoverflow.com/a/6394497/4447199

n.sh
  • 347
  • 4
  • 19
  • i tried media queries but it is not working, can you please provide css – vj.madamala7 Jul 21 '17 at 06:27
  • This Meta tag solution didn't work, i made the font-size 16px after reading other answers in the thread, Thanks for the lead – vj.madamala7 Jul 21 '17 at 06:43
  • could you update the answer to list the font-size solution so i can mark it as a accepted answer – vj.madamala7 Jul 21 '17 at 06:44
  • @MadamalaVJ i added the link of the answer that worked for you. but i choose the meta tag solution for my scenario because on my web site this was a problem for all inputs. i didn't removed so it may help someone else in other ways :) – n.sh Jul 21 '17 at 06:57