How can I control the panel dismissible area in jQM 1.3.0?

How can I control the panel dismissible area in jQM 1.3.0?

I finally figured out a couple of things that helped me change the with of a panel. I have a dismissible panel, positioned on the right side and I modified the default width, 17em, and made it 25em. However, when I click inside the panel, within the area of the 17-25em, the panel is dismissed. 

I could not find any visual element that captures the mouse click. I am inclined to believe that the dismissible area is predefined in Javascript, and does not update after I modified the CSS. Here is my CSS code:

  1. .ui-panel.ui-panel-position-right.ui-panel-display-reveal.ui-panel-open.ui-panel-animate {
  2. width: 25em;
  3. }

  5. .ui-panel.ui-panel-position-right.ui-panel-display-reveal.ui-panel-closed.ui-panel-animate {
  6. width: 0em;
  7. }

  9. .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, 
  10. .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, 
  11. .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, 
  12. .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
  13. left: 0;
  14. right: 0;
  15. -webkit-transform: translate3d(-25em,0,0);
  16. -moz-transform: translate3d(-25em,0,0);
  17. transform: translate3d(-25em,0,0);
  18. }

Does anybody have an idea for making the dismissible area as wide as the panel?

Thanks in advance,