jQuery mobile panel doesn't close fully only on Android browser
Question
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>
1 answers
solution1
1 ACCPTED 2015-06-10 09:22:06
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.