Question

我想为我的移动界面更改 .ui-panel 的宽度，所以我在我的媒体查询中做了这样的更改（在css中）

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

但现在当我关闭它。当它到达17em结束时它显示出一个障碍

我从这里尝试了这个解决方案：jQuery Mobile panel width

有什么建议吗？

Answer 1

更改overlay或push面板的宽度时，您还必须更新translate3d动画属性以匹配宽度。默认情况下，面板的宽度为17em，默认动画x的位置为-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);
}

当我在单击关闭按钮后更改jquerymobile面板宽度时，它会关闭具有非期望效果的面板

1 个答案: