Menu
JSFiddle: http://jsfiddle.net/nbh1rn33/
I have a weird issue with jQm panel.
An opened panel doesn't close fully. See below image:
Strangely, this only happens on Android browser, and not on PC (Chrome, IE).
Is this a bug with jQm or have I done something wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" >
<h1>Test Page</h1>
<div data-type="horizontal" data-role="controlgroup">
<a href="#search_condition_panel" id="search_condition_btn" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-grid">Show Options</a>
</div>
</div>
<div role="main" class="ui-content">
</div>
<div data-position-fixed="true" data-role="panel" data-display="overlay" id="search_condition_panel" data-position="right">
<div class="ui-field-contain">
<label for="search-condition-select-brand">Brand</label>
<select id="search-condition-select-brand" name="search-condition-select-brand" data-mini="true">
</select>
</div>
</div>
<div id="datepicker"></div>
</div>
</body>
</html>
370
Look like jQuery UI bug, for 1.4.2 it can not be reproduced and it reproduced for 1.4.5. Test on my Galaxy S4
The main difference in your case is in сss properties of class .ui-panel-closed:
/* 1.4.5 */
.ui-panel-closed {
width: 0;
max-height: 100%;
overflow: hidden;
visibility: hidden;
left: 0;
clip: rect(1px,1px,1px,1px);
}
/* 1.4.2 */
.ui-panel-closed {
width: 0;
max-height: 100%;
overflow: hidden;
visibility: hidden;
}
And if you reset left css property for .ui-panel-closed all will work fine:
.ui-panel-closed {
left: auto !important; // left auto fix problem
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
