This issue is happening on galaxy s3 devices as far as I'm aware. I can't seem to replicate it virtually on a AVD I set up with s3 specs and I have not encountered it on galaxy s4/s5's so I'm kind of lost. Assuming it's a css issue with the webkit on the s3.
I'm running on jquery mobile 1.4 with a phonegap 3.3 build, and am utilizing the external panel and multi-page pop-ups, although this issue is happening with both multi-page and page specific pop-ups, the thing they have in common is forms.
Let me start by showing a screenshot of the "block" I'm referring to in the title...
As you can see from the picture, this looks as if the external panel (right positioned), which this popup is actually triggered from, is displaying in the background. This also happens, however, when I'm triggering a page specific pop-up which has a form on it which is not connected with the panel in any way.
I haven't done any extra css styling on these particular widgets, so I'll just include the code of what I'm using to actually trigger this popup...
My HTML of the external panel and multi-page popup...
<div id="popup-login-page" data-theme="b" data-dismissible="false" data-overlay-theme="b" class="ui-corner-all hidden" data-history="false">
<div style="padding:10px 20px; width:100%;">
<form id="t_login_form">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="t_username">Username:</label>
<input type="text" name="t_username" id="t_username" value="" placeholder="Username" data-clear-btn="true" autocomplete="off" data-mini="true">
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="t_password">Password:</label>
<input type="password" name="t_password" id="t_password" value="" placeholder="Password" autocomplete="off" data-mini="true">
</div>
<div data-role="fieldcontain">
<input type="button" value="Login" id="truck_login" />
<input type="button" value="Cancel" id="truck_login_cancel" />
</div>
</form>
</div>
</div>
<div data-role="panel" id="menu" data-theme="b" data-position="right" data-display="overlay" data-swipe-close="true">
<script src="app_functions/menupanel.js"></script>
<div data-role="content">
<input type="button" data-theme="b" class="d_added_button" value="Close" data-icon="delete" data-iconpos="right" data-rel="close" data-mini="true" />
<div data-role="collapsible" id="franchiseLogin" data-collapsed="false" data-icon="gear">
<h3>Franchise Login</h3>
<div id="login_buttons">
<input type="button" data-theme="b" class="d_added_button" value="Truck Sign In" id="t_login_button" />
</div>
</div>
<a id="popup-checkout-click" href="#popup-checkout-page" data-rel="popup" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" style="display:none;" data-transition="flip"></a> <a id="popup-login-click" href="#popup-login-page" data-rel="popup" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" style="display:none;" data-transition="flip"></a>
<div data-role="collapsible" id="franchiseTruckSelect">
<h3>Select truck to check-in</h3>
<div id="trucklist_buttons"> </div>
</div>
</div>
</div>
...And the portion of the js that triggers this popup to fire...
$(document).on('click', '#t_login_button', function(e){
$('#menu').panel('close');
$('#popup-login-click').click();
});
The hidden class on the popup is removed once a network connection is verified so that's a non issue.
I'm pretty lost on this one, but am hoping someone has encountered the problem before, although I've been searching all day for solutions and haven't come across anything similar that works. I know there were issues a year or so ago with a s4 update and some css issues, so I'm hoping this is a somewhat common problem with a fix.
I'll update tomorrow with any more info I come across.
