CODEWITHSUNDEEP
androidcsscordovajquery-mobile-popup
user3511759
user3511759

Reputation: 21

JQuery Mobile seeing black overlay blocks on Android

I currently created a sample app built using JQueryMobile and Phonegap. Its a simple app, nothing special and it is intended to run on the Android platform, both for Mobile and Tablets.

I have a page on the app which displays a popup dialog box, with a black/transparent background. This popup appears if a user clicks on a button on the previous page.

On other mobile and tablet devices, the popup dialog with the black transparent background appears to look fine. However there is one device i've tested the app on which if the app shows the popup with the dialog, there are also black blocks that overlay the screen.

Does anyone have any suggestions on what I could do to avoid this issue? I've looked around to see if this problem exists, but I've had no luck. The majority of devices i've tested this app on appear to not have this issue, just one device, but in being thorough, i'd like to fix this issue.

The Screenshot of this issue can be found on the following link:

https://i.sstatic.net/uHrGr.jpg

I've copied the HTML code for your reference too.

Thanks.

<div id="fourthPage" data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" id="fourthPageHeader" data-id="main-header" >
        <h1>Fourth Page</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" id="settingsOptionsList">
        <li><a href="#confirmDialog" data-rel="popup">Test Dialog</a></li>
    </ul>
    </div>
        <div id="fourthPageFooter" data-role="footer" data-position="fixed" data-id="main-footer">
    </div>  

    <div data-role="popup" id="confirmDialog" data-position-to="window" data-overlay-theme="a" data-dismissible="true">
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Test Dialog</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <h3 class="ui-title">This is the test dialog</h3>
            <a href="#" data-role="button" id="cancelDeleteButton" data-inline="false" data-rel="back" data-theme="c">OK</a>      
        </div>
    </div>  
</div>

Here is the CSS code (with the suggestions given by Marcin below):

.ui-page {
height: 100% !important;
-webkit-backface-visibility: hidden;
}

body{
  overflow:hidden;
}

.ui-dialog-background {
background:rgba(0,0,0,0.5)
}

.ui-dialog-background.pop.in {
background:rgba(0,0,0,0.5)
}

.ui-dialog {
min-height: 100% !important;
background:rgba(0,0,0,0.5)
}

Upvotes: 2

Views: 2258

Answers (3)

user3511759
user3511759

Reputation: 21

Thank you so much. Yes this code :

div.ui-overlay-a {
    background-color: rgba(0, 0, 0, 0.5);
}

...appeared to have solved the problem regards the black patches on the dialog. Thanks user3434809 and everyone for taking the time to reply.

Upvotes: 0

user3434809
user3434809

Reputation: 29

I was able to reproduce your issue. Give this a try:

div.ui-overlay-a {
    background-color: rgba(0, 0, 0, 0.5);
}

Upvotes: 1

Marcin Mikołajczyk
Marcin Mikołajczyk

Reputation: 731

you need to use this CSS:

background:rgba(0,0,0,0.5)

for transparency instead of opacity / filters etc.

Upvotes: 0

Related Questions