Jquery Mobile navigations using different panels, breaks css

I have a problem which I can't clearly consider to be a navigation problem or dynamic display of content probl开发者_如何学Pythonem. Firstly, I am using a single html page which hosts multiple pages where I have two navbars for each page: a header and a footer.

The first page display contents which are dynamically fetched from php at the backend as JSON object using getJSON(). The content are displayed as children of three collapsible items using the html() function of these collapsible items. The content are filled in H1 and two lists children tags of the collapsible items respectively.

My upper navbar has three entries (page1, page2, page3). When I navigate from page1 to page2, then click page1 entry from page2, everything works as expected, i.e., I get the page1 as in the first time I left it.

The lower navbar is glyphish menu with three pages as well (page_a, page_b, page_c). The problem happens when I go to page_c from page1 and then I click the page1 link to return back (or even when I use JQM default "back" button), the CSS of page1 breaks displaying neither the header navbar nor the first collapsible, but rather merging the content of the first collapsible H1 with the content of the second collapsible confusingly.

I use listview() to refresh the listviews once filling them dynamically (after each time calling pageshow()).

I had different attempts to solve the problem one of them is using page() on the disappearing collapsible item but it didn't work.

It is useful to mention that I am doing my development directly on the device Blackberry Bold 9700 (where it breaks!) on it's webkit browser; however, the functionality works well on the desktop browsers Firefox 4, Chrome and it's extension Ripple.

If anyone had such issue and managed to resolve it, I would appreciate the insight/resolution.

Cheers.

---

[EDIT] following the link provided by cpak, I added the following CSS rules to my custom css file and it managed to solve the issue.

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { height:0; overflow:hidden}

.ui-mobile .ui-page-active { display: block; overflow: visible; height:auto; min-height:100%;}

Then, I removed the above rules all together and used the most recent built of JQM which resolved the issue by default. For anyone out there, I was using v1.0a4.1 when I encountered the issue, but it seems fixed in the most recent version of JQM (dated May 24)

---

I had/have a similar problem when going back and forth between the #home page and other pages in Chrome and MobileSafari but not in the native Android browser. Found this a few days back:

Layout of home page gets screwed up in Safari and MobileSafari when using the jQuery Mobile "Back" button

I haven't had time to try it out yet but it may be related to what you're experiencing.

[EDIT]: After re-reading your question I'm not sure this WILL help, but I'll leave the post here anyway for the community to decide =)