Hi,
I have a page control which has a title. On that page I have another control (calendar) and a button. When I click the button I want to apply this class to the calendar:
.full-size {
width: 100% !important;
height: 100% !important;
top: 0;
left: 0;
position: fixed !important;
z-index: 10;
}
The reason for doing this is iPad not supporting the HTML5 Full Screen API so I want to "simulate" this behaviour.
If I run the code on a desktop computer, when you click the button, the calendar takes the full width and height and it's on top of everything.
If I run the code on iPad (Safari), the calendar is full width and height, but it slides under the page title so the page title is on top of everything. I noticed it's caused by a CSS class from the page title, this class only appears when you access the page from an iPad and it might be related to some touch scrolling.
My question is: is there anything that I can do to my control in order to bring it on top even on iPad?
Please note that this is just an example, I am working on a library so I should not change the page control styling under any circumstances.
To replicate the issue:
1. Run this code http://jsbin.com/faqadiguja/1/edit?html,js,output on desktop computer and click the button. Observe the calendar is on top of everything.
2. Run the same code from an iPad and observe the page title is on top of the calendar
Thanks,
Radu