jtsage datebox changes my header from fixed to inline

Question

I have a strange problem when I try to use jtsage databox. The header and footer of my jquerymobile page are supposed to be "fixed". And until the user opens the data picker, these header and footer do stay fixed. But after the datepicker is used, the header and footer are no longer "fixed". Why not? (And what other strange things does datepicker do when the user touches it?) Example here

Answer 1

I have successfully replicated your problem and found s solution.

Your problem comes from picture placed in your header left side. For some reason datebox will cause header and footer to change its height when a date is selected. If you remove the logo this problem will disappear. But of course you can't remove a company logo.

So to fix your problem you should remove data-position="fixed" from your header but leave it in your footer. You only really need it in the footer. This will solve your problem.

EDIT :

My advice is go with this date picker: http://mobiscroll.com/

It can be customized much much better then Datebox not to mention it has a different mobile platform skins so it can look like native Android or iOS datepicker. Not to mention there are skins for older and newer Android and iOS versions.

More info:

If you want to find more about jQuery Mobile date pickers take a look at this article.