jQuery UI Widgets › Forums › Editors › DateTimeInput › Location of calendar when on mobile
This topic contains 2 replies, has 2 voices, and was last updated by Pietervk 7 years, 3 months ago.
-
Author
-
Hi, when opening the calendar on a PC size display, it opens directly below the input as expected. However, when I open it on a mobile phone, or in the Chrome emulator, it goes to the bottom of the page
Below the code I use
var widthDt = $(window).width() > 799 ? '148' : '55%'; $("#jqxdatetimeinput").jqxDateTimeInput({ width: widthDt, height: '32', theme: 'energyblue', allowNullDate: true, placeHolder: $(".jqxDatePH").text().trim(), formatString: $(".jqxDateFS").text().trim() }).on('change', function () { validateBirthDateJQ(false); }); var culture = $(".jqxDateCulture").text().trim(); if (culture) $("#jqxdatetimeinput").jqxDateTimeInput({ culture: culture }); $("#jqxdatetimeinput").val(null); $("#inputjqxdatetimeinput").blur();
The HTML:
<div class="ui-field-contain jqxDate" id="jqxDate"> <label for="jqxdatetimeinput" id="lbbd" class="client lbbd">Geboortedatum</label> <div id="jqxdatetimeinput"></div> <div class="guide"> <a class="doPop" data-position-to="#txtAge" data-focus-to="#jqxdatetimeinput"><i class="fa fa-info"></i></a> <div class="info-pop">Optioneel: Als je de geboortedatum weet, wordt de leeftijd berekend op het moment van (her)afname. Voer de datum in als dag-maand-jaar.</div> </div> </div> <label class="jqxDateCulture" style="display: none">nl-NL</label> <label class="jqxDatePH" style="display: none">dd-mm-jaar</label> <label class="jqxDateFS" style="display: none">dd-MM-yyyy</label>
The code that gets generated sets a top that is far too high: top:1394 (the actual value varies).
Any hints where I can look to change this?
Thx Pieter
Hello Pietervk,
I tested this example below and it seems to work fine:
https://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/jqxdatetimeinput/datetimeinput.htm?(mobile)&=fullscreen
Also, this demo (in the Chrome emulator) and it is the same:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/defaultfunctionality.htm?lightBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThanks, I made this fiddle. It does reproduce another issue I am having. It works with a mouse, but on a mobile the date does not get captured.
On a mobile, fill in 1-10-1980 and click on the calendar (or anywhere else) notice the date is no longer in 1980.
http://jsfiddle.net/petitbarzun/zmc93263/7/
I will try to reproduce the height issue later.
Thanks
Pieter
-
AuthorPosts
You must be logged in to reply to this topic.