External panel and external header don't work correctly together

[Gajotres]

Working example: http://jsfiddle.net/sidouglas/qVNyf/1/

How to recreate:

1. Open panel
2. Click on a link provided inside a panel

What's happening

• Header will slide over panel,
• Slider will not animate back, it will just disappear

Error detected using (Win 7):

• Desktop Firefox 29
• Desktop Chrome 34.0.1847.131 m

Works just fine using (Win 7):

• Desktop Chrome 34.0.1847.137 m

[Gajotres]

Also it works just fine in IE 10.0.7

[arschmitz]

@Gajotres thank you for reporting this. However I cannot reproduce this in either of the browsers you mention it would be surprising for this to be fixed between chrome 34.0.1847.131 and 34.0.1847.137 and if it was it means this is a bug with the browser rendering and its unlikely we could fix it. Im going to close this if someone else can reproduce we will reopen.

[Palestinian]

@arschmitz I confirm there's an issue. Here is a video.

.ui-panel-wrapper isn't taking active page's height, it is more obvious with dark theme.

Setting .ui-panel-wrapper's height once before panel is open fixes the problem.

$(document).on("pagecreate", function () {
  $("[data-role=panel]").one("panelbeforeopen", function () {
    var height = $.mobile.pageContainer.pagecontainer("getActivePage").outerHeight();
    $(".ui-panel-wrapper").css("height",height+1); // +1px for fixed header
  });
});

Chrome 34.0.1847.137 m (Windows 7)
jQuery 1.9 / jQM 1.4.2

[Gajotres]

I had a mistake while writing my ticket, you should not close panel immediately, instead click on a link inside a panel and let it close by itself.

[Palestinian]

@Gajotres Oh, now it is a totally different issue. The links in panel move to different pages with transition, removing data-transition solves it.

[arschmitz]

@Palestinian thanks for looking at this an i can see that issue however unless i'm misunderstanding that does not sound like what @Gajotres is describing but a separate issue with page height.

@Gajotres i see your issue now reopening and still an issue in chrome 34.0.1847.137

[Palestinian]

@arschmitz it is a pleasure.

Actually, it is two issues in one:

1. .ui-panel-wrapper height (only external panel)
2. Navigating to a different page from an active panel with transition. I guess - not sure though - this issue was reported before in jQM 1.4.1 (this applies to both internal and external panels)

[ganchenkor]

There is another issue if you wrap both header and footer in another div. Footer moves out of that div(as expected probably) while header is not and causing it stay permanently there when you open up a panel
http://jsfiddle.net/qVNyf/17/
http://jsfiddle.net/25c3ykjn/9/