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

Closed
takuyasato opened this Issue Aug 21, 2012 · 4 comments

Projects

None yet

4 participants

@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 -->
@Wilto Wilto was assigned Aug 30, 2012
@Wilto Wilto added a commit that closed this issue Aug 30, 2012
@Wilto Wilto Fixes #4816, fixes #4844, fixes #4874 — Prevents ICS native browser f…
…rom appearing to render the popup overlay above the popup when a position: fixed element exists on the page.
17eb661
@Wilto Wilto closed this in 17eb661 Aug 30, 2012
@arschmitz arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Oct 16, 2012
@Wilto Wilto Fixes #4816, fixes #4844, fixes #4874 — Prevents ICS native browser f…
…rom appearing to render the popup overlay above the popup when a position: fixed element exists on the page.
55f027b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment