Mobile hybrid app overlay issue

StackOverflow https://stackoverflow.com/questions/20797264

Question

We have a problem with the overlay on a page in a hybrid mobile application. We have few buttons on the page with position relative, on click of a button overlay mask shows up with a date picker, which has a fixed position.

The problem is when we select date with date picker and click on the set button to set the date, the buttons those are behind on the page are also firing click event.

We've given higher z-index to the overlay. The same thing works on desktop browsers, but not on the mobile device.

Any help is appreciated.

Update: Worklight version 5.0.6.1 Device Android 4.0.4 - Sony xperia It is not running on "browser", it's in browser shell (worklight hybrid app)

Was it helpful?

Solution

Is the date box the child of another element? In this case the buttons will never work for Android Xperia browsers. You should instead place the date box directly in the <body> element(so that the parent of the date box element is <body>) and it will work.

I guess your date box is placed in somewhere like this:

<body>
    <div>
        <div>
            <div id='datebox'>
                <table style='position:fixed;...'>Your date box...</table>
            </div>
            ...
        </div>
    </div>
</body>

You should instead move the datebox so that <body> element is its parent, like this:

<body>
    <div>
        <div>
            ...
        </div>
    </div>
    <div id='datebox' style='position:fixed;'>
        <table style='...'>Your date box...</table>
    </div>
</body>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top