How can I increase the width of a panel using jQuery mobile?

Question

<div><a href="#overlayPanel">
    search</a>
</div>

<div data-role="panel"
     id="overlayPanel" 
     data-theme="a"  
     data-display="overlay"                                                 
     data-position="right" style="width:100%">
         <h2>Overlay Panel</h2> 
         <a href="#pageone" data-rel="close">
             Close panel
         </a>
</div>

I tried above code using jquery mobiles, its increasing the size but its closing automatically when we click any where in the panel

Answer 1

Set data-dismissible property to false in your panel. Like this

<div data-role="panel" id="myPanel" data-dismissible="false" style="width:100%"> 

Refer this Fiddle Demo