Skip to content
This repository

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

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

4 participants

takuyasato Mat Marquis Todd Parker
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!

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

Todd Parker

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!

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 -->
Mat Marquis Wilto closed this issue from a commit August 30, 2012
Mat Marquis 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
Mat Marquis Wilto closed this in 17eb661 August 30, 2012
Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile August 30, 2012
Mat Marquis 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
Something went wrong with that request. Please try again.