jquery mobile datebox custom alignment

Question

I am currently using jquery mobile datebox (http://dev.jtsage.com/jQM-DateBox/) to display a calendar. I stuck the input in a div with display: none, and then I manually activate the calendar with the following javascript:

$('#opencalendarlink').live('click', function(){
    $('#datepicker').datebox('open');
});

where opencalendarlink is the id of the button and date picker is the id of the calendar. However, the calendar appears now left aligned, although the button and corresponding hidden div are center aligned. How can I fix this?

Answer 1

Please try

    <div style="visibility:hidden; height: 0px;">
    <label for="mydate">Some Date</label>

    <input name="mydate" id="mydate" type="date" data-role="datebox"
       data-options='{"mode": "calbox"}'>
    </div>

jQM-DateBox calculates its position probably from it's parent and because it isn't rendered (because of the display:none) this will be 0,0, setting visibility will fix this