jQuery Mobile Panel Problems -
i have jquery mobile panel that's not behaving (in phonegap if matters).
<div data-role="panel" id="nav-popup-menu" data-position="left" data-transition="slide" data-display="overlay" data-dismissible="true"> <button class="search">search</button> </div> .ui-panel { background-color: rgba(0,0,0,0.5) !important; width: 200px; } <a href="#nav-popup-menu" data-role="button" data-icon="gear" style="background-color: #f6f5f4; border-color: #f6f5f4; color: #f6f5f4; ">|</a>
based on above expect pressing anywhere outside panel cause close. however, behavior doesn't seem respect custom width. is, if press @ 250px, doesn't close, whereas if press @ 500px, default width have ended, close.
using jqm 1.4.1
any ideas?
a panel adds overlay class ui-panel-dismiss
, closes active panel once clicked/touched. default position of panel's overlay left: 17em;
(in case of left panel). value represents default width of panel.
when override panel's width, need adjust overlay's position. give same value of panel's new width.
.ui-panel-dismiss { left: 200px !important; }
Comments
Post a Comment