jQuery mobile panel doesn't close fully only on Android browser
l46kok
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>
Pinal
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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
jquery mobile popup close button doesn't always work
- 2
jQuery Mobile Panel样式问题
- 3
jQuery Mobile：UI-Panel内容在Android 4.4.2上第二次消失
- 4
jQuery Mobile Panel打开操作之前
- 5
jQuery Mobile Panel无法正常运行
- 6
jQuery Mobile Panel导航冻结/挂起
- 7
jQuery Mobile Panel打开时隐藏flexslider
- 8
调用.panel（）函数时，jQuery Mobile Panel小部件会引发错误（1.4.5，jquery 1.11.1）
- 9
在靠近面板的位置单击时，jQuery Mobile Panel未关闭
- 10
jQuery mobile Panel的页眉和页脚高度差
- 11
jQuery Mobile和Ajax Panel无法正确打开
- 12
在靠近面板的位置单击时，jQuery Mobile Panel未关闭
- 13
更新后，jQuery Mobile Panel无法正常工作
- 14
jQuery Mobile Listview in Dialog won't initialize
- 15
如何将链接列表添加到JQuery Mobile Panel？
- 16
mysql insert only if not exists doesn't work
- 17
Android, setReuseAddress doesn't work
- 18
css doesn't work in firefox, but in all other browser it does
- 19
从android中的jQuery mobile（phonegap）应用程序打印
- 20
jQuery Mobile图标未在Android 2.3中显示
- 21
Why the scrollTop in jQuery doesn't work on Firefox?
- 22
使用JavaScript的Focus Mobile Browser
- 23
jQuery - `on` event doesn't work after jQuery.replaceWith
- 24
jQuery Mobile的基本标题
- 25
Jquery Mobile的验证样式
- 26
jQuery Mobile菜单
- 27
jQuery Mobile和PHP
- 28
jQuery Mobile显示空白
- 29
jQuery Mobile停止事件
我来说两句