CODEWITHSUNDEEP
javascriptandroidjqueryhtmljquery-mobile
TtT23
TtT23

Reputation: 7030

jQuery mobile panel doesn't close fully only on Android browser

JSFiddle: http://jsfiddle.net/nbh1rn33/

I have a weird issue with jQm panel.

An opened panel doesn't close fully. See below image:

enter image description here

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>

Upvotes: 7

Views: 474

Answers (1)

Alex
Alex

Reputation: 11245

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
}

Upvotes: 1

Related Questions