jquery/jquery-mobile — Issue #3682: Elements displace on transition return
Author: GregRHT
Created: 2012-02-29 21:18:59+00:00
State: open

demo page is located at:

http://jsfiddle.net/H4VDC/

Cover page hides vertical tab elements. Slide left cover side left to reveal column tabs. Tapping on a column loads and reveals content, pushing rest of page off to left and right. Re-tapping the column, now on left side, returns to previous state.
On returning from any column, however, the left most column, "assistance", gets pushed off the left side of the screen, in this example. In the actual page, where all of the column contents are pulled in externally as opposed to internally in this jsfiddle example, the column that was tapped gets pushed off to the left, not just the left-most column. Eventually, when you tap on every column, they all disappear.

I'm relatively certain that the issue is that there are data-role="page" embedded within other ones, but I'm not certain how to properly structure this issue. In this example, there is a home template that loads data into itself -- the data page does not replace the template page, and I have many other upcoming iPad app projects that function similarly, where the home page is not replaced. I tried leaving data-role="page" off of the front page, but I could not get that to work either. Is there a work-around for this, or an already established proper way to set this up, or does a method have to be built to construct a base template into which other pages can be inserted?