[AndroidOS 4.04] Pop up Dialog's overlay-theme Does not work with fixed bars

[takuyasato]

Hi,
The overlay-theme of Pop-up Dialog in JQuery Mobile 1.2 does not work properly with a fixed menu bars at the bottom, on Android 4.04 Browsers.

It looks as though, the fixed bar at the bottom shows in front of the popup dialog,
causing the popup dialog itself to be darkened the the overlay-theme.

It works fine on iOS and Android 2.3 browsers.

My testing environment is as follows,

JQuery Mobile 1.2.0 alpha
JQuery 1.7.1

Android 4.0.4 (Galaxy Nexus)
Using preinstalled Browser

Thank you in advanced!

[mrextreme]

I think I ran into the same problem on a Galaxy Note with Android 4.0.4 and stock browser. The popup "opens", the page becomes faded ( opaque overlay of the popup works ), but the popup window itself is not shown. If I tap on the background (outside of the popup - if it was there), then it closes as it should. JQM 1.2.0 a1, jQ 1.8.0

normal screen: http://i48.tinypic.com/34e2ulu.jpg
popup: http://i45.tinypic.com/3g6mc.jpg

[toddparker]

I just re-tested our docs examples that use overlays and they look fine on My Galaxy Nexus running 4.0.4. Can you confirm you're seeing this issue here:
http://jquerymobile.com/test/docs/pages/popup/index.html

If not, then you might want to check your code. Is the popup inside the page container?

[takuyasato]

Hi, thank you for your comment.

Can you confirm you're seeing this issue here:
http://jquerymobile.com/test/docs/pages/popup/index.html

My guess is that this issue occurs only when the page have fixed footers at the bottom.

If not, then you might want to check your code. Is the popup inside the page container?

Popup is written inside the page container.

Thank you in advanced!

[mrextreme]

The exact same code I use works on 2.x Android, only 4.x acts up. I think the tester said it also works on iOS. I will let you know about that.

<div data-role="page" id="page-map" data-theme="b">
    <div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="b">
        <a href="#" data-icon="arrow-l" id="page-map-back-btn">Back</a>
        <h1 id="map_type_header"></h1>
    </div>

    <div data-role="content">
        <div id="map-canvas"></div>
    </div> <!-- content -->

    <div data-role="footer" data-tap-toggle="false" id="page-map-footer" data-position="fixed" data-theme="c">
    </div><!-- footer -->

    <div data-role="popup" id="taxi-info-popup" data-overlay-theme="a" data-theme="c" class="ui-corner-all">
        <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <div data-role="header" data-tap-toggle="false" data-theme="b" class="ui-corner-top">
            <h1>Taxi Details</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <p id="taxi-info-popup-content"><p>
            <a id="tipc-call-driver" href="#" data-theme="c" data-role="button">Call Driver</a>
        </div>
    </div> <!-- taxi-info-popup -->
</div> <!-- page-map -->