CODEWITHSUNDEEP
jquery-mobile
Joe's Ideas
Joe's Ideas

Reputation: 540

external panel in jquery mobile 1.4 causes display bug

I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.

If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.

The new docs aren't much help :/

I've tried a lot of variations... but here's a basic example that will trigger it:

<div data-role="panel" id="imExternal" data-theme="a">
  <div style="height: 1200px; background: #000;">
    <p>this is the panel, code is tight and outside of any containing page divs.</p>
  </div>
</div>

*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.

Upvotes: 1

Views: 694

Answers (3)

Omar
Omar

Reputation: 31732

You should enhance External widgets manually, as they don't get enhanced when page is created.

$(function () {
  $("[data-role=panel]").panel();
});

Also, elements / widgets inside External panel should be enhanced as well.

$(function () {
  $("[data-role=panel]").panel().enhanceWithin();
});

Upvotes: 3

Joe&#39;s Ideas
Joe&#39;s Ideas

Reputation: 540

Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.

Upvotes: 1

Joe&#39;s Ideas
Joe&#39;s Ideas

Reputation: 540

I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.

$('#page').css('height', $(window).height());

Upvotes: 0

Related Questions