Basic description of my jQM page from top to bottom (there's code at the bottom of this question):
- Header bar containing a button and a popup that is opened by clicking the button.
- An area containing between 1 and 4 HTML5 canvases. Canvases can be added/removed and are resized dynamically to fill the middle part of the window with no spaces between them.
- A div containing a few buttons and a slider. All canvases have the display:block attribute and when there are 2-4 canvases, some are given the float:right attribute. When there is only one canvas, the following problem does not occur.
Everything is in the correct position and dynamically resized when the window is resized. Before the button is clicked, everything is fine. When the button is clicked, the popup appears just fine, but the 4 canvases are knocked out of their block quadrant and stretch the page to the point of a scrollbar appearing. Strangely, when I restore down and then maximise, the canvases are back in their correct positions and the popup remains where I want it. Whenever I close and open the popup, the canvases are knocked out of place again.
Apologies for image links, but I don't have the reputation to embed them.
Before opening popup:
After opening popup:
After restoring down and then maximising, I get what I originally wanted: (can't add third link due to reputation; it shows a combination of the first two images with the popup appearing correctly over the original layout)
HTML for popup (this is a simplified version of the one I actually use, but has the same effect):
<div id="header" data-role="header">
<a id="menu-button" data-transition="pop" href="#simplepopup" data-role="button"
style="margin:0; padding:0;">Open Popup</a>
<div data-role="popup" id="simplepopup">
TEST
</div>
</div>
JS for popup:
$("#menu-button").click(function () {
$('#simplepopup').popup('open', {positionTo: "window"});
});
Boiling this down to one question: why would opening a jQM popup affect the background layout?
