when i change jquerymobile panel width after clicking close button it closes panel with a non desired effect

Question

I wanted to change the width of .ui-panel for my mobile interface so i did a change inside my media query like this (in css)

.ui-panel{width: 310px !important}

But now when i close it. It shows a hitch when it reach to the point where it ends for 17em

I tried this solution from here: jQuery Mobile panel width

any suggestions ?

Answer 1

When change width of overlay or push panel, you also have to update translate3d animation property to match the width. By default panel's width is 17em, and the default animation x position is -17em.

/* left panel - overlay and push */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
  left: 0;
  -webkit-transform: translate3d(-310px,0,0);
     -moz-transform: translate3d(-310px,0,0);
          transform: translate3d(-310px,0,0);
}

/* right panel - overlay and push */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
  right: 0;
  -webkit-transform: translate3d(-310px,0,0);
     -moz-transform: translate3d(-310px,0,0);
          transform: translate3d(-310px,0,0);
}