Hey there, I'm working on a project and I need help with an issue. You can check out the example page here:
If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown search menu instead.
I have set the z-index to 1 for the menu and 0 for the search DIV, but unfortunately, it doesn't seem to be resolving the problem. Here's what my result looks like:
https://i.sstatic.net/tbveO.jpg
$("div[data-role='panel']").panel().enhanceWithin();
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<body>
<div role="main" class="ui-content">
<div id="menuPanel" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" >
<h4>Menu</h4>
<ul data-role="listview">
<li><a href="#" style="color: #FFFFFF" >List</a></li>
<li><a href="#" style="color: #FFFFFF" >New Ads</a></li>
<li><a href="#" style="color: #FFFFFF" >Register</a></li>
<li><a href="#" style="color: #FFFFFF" >Login</a></li>
<li><a href="#" style="color: #FFFFFF" >Your Ads</a></li>
<li><a href="#" onclick='Website2APK.rateUs();'>Rate us</a></li>
</ul>
<p></p>
<img src="img/head2.jpg" />
</div>
<div id="divFilter" >
<table>
<tr>
<td><b>Category</b></td>
<td><b>Type</b></td>
<td><b>Distance Km</b></td>
</tr>
<tr>
<td>
<select id="cbbSearchCategory" onchange="ScaricadatiEavvia();"></select><!---->
</td><!---->
<td>
<select id="cbbSearchKM" class="form-control" onchange="ScaricadatiEavvia();">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="40">40</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="" selected>2000</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</body>