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; } 

demo


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -