htmlcordova-3intel-xdkappframeworkcrosswalk-runtime

Why does the select menu always appear under the modal dialog?

I am using a modal dialog with a tag in it. I am using appframework and appui, building to apk for android. I went to build my code out again after xdk updated and suddenly my select menu always appears under the modal dialog. I have changed nothing. No matter what I do this consistently happens, but mostly on Samsung devices or anything running android lollipop. The same goes for the inbuilt ripple emulator. I am at my wits end as far as this problem goes. I have tried building out using crosswalk as well. I have tried setting the z-index of the select menu and modal panel. Nothing works. If I stop the panel being modal everything is fine, but this is not an option client will not accept anything short of a modal dialog.

Could this be relevant af.selectBox.js from app ui codebase

I don't care if I have to use a dirty hack I just want to fix it!

Here is what my problem looks like. The exact same thing happens on REAL DEVICES, WITH A REAL BUILDOUT, as well as in crosswalk app preview. enter image description here

Here is the select element.

<select class="wide-control" id="select_timeout">
    <option value="15">15 Mins</option>
    <option value="30">30 Mins</option>
    <option value="45">45 Mins</option>
    <option value="60">1 Hour</option>
    <option value="75">1 Hour 15 Mins</option>
    <option value="90">1 Hour 30 Mins</option>
    <option value="105">1 Hour 45 Mins</option>
    <option value="120">2 Hours</option>
    <option value="135">2 Hours 15 Mins</option>
    <option value="150">2 Hours 30 Mins</option>
    <option value="165">2 Hours 45 Mins</option>
    <option value="180">3 Hours</option>
</select>

And here is how I am declaring my modal panel:

<div class="upage panel" data-modal="true" data-load="enterSettings" data-unload="leaveSettings" id="page_settings" data-footer="none">

This all worked perfectly a day ago, no code changed.

Solution

  • OMG! got it. here is the fix

    #afui #afui_modal{
    z-index: 4000 !important; /*set to something other than 9999*/
}

    knew it was z-order problem