Currently, I am in the process of implementing a few instances of , but I am encountering some issues with the CSS. When viewing the website on an iPad or iPhone, the calendar is positioned correctly as the container covers the window like a fixed position element should. However, on my site, when pulling up the calendar, the greyed-out background starts from the bottom left corner of the input next to it, as if it were positioned relative, and extends the dimensions of the window. Additionally, when inspecting in Mobile Safari's web inspector on my Mac, the blue box indicating the div's position is fixed to the top of the document rather than the window.
The only error message I am receiving is a 404 for a stylesheet unrelated to this plugin.
Below are three screenshots illustrating the issue. The first shows the input followed by the calendar div:
In the second screenshot, the Inspector seems to think it is rendering at a different spot, with the translucent background appearing further down the page:
The third image shows that the calendar is the correct size, but it does not position itself properly:
If anyone has any insights into why this may be happening, I would greatly appreciate hearing them as I am currently stumped.
EDIT
This page has been tested on Android devices and functions perfectly.