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 2 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Location of calendar when on mobile #96937

    Pietervk
    Participant

    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
    DateTime Location wrong

    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

    • This topic was modified 2 years, 3 months ago by  Pietervk. Reason: Formatting
    • This topic was modified 2 years, 3 months ago by  Pietervk. Reason: Formatting
    Location of calendar when on mobile #96965

    Hristo
    Participant

    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?light

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Location of calendar when on mobile #96979

    Pietervk
    Participant

    Thanks, 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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.