Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Jquery mobile changing panel width
@left-panel-width: 17em;
@right-panel-width: 35em;
.ui-panel {
width: @left-panel-width;
}
.ui-panel.ui-panel-position-right {
width: @right-panel-width;
}
.ui-panel.ui-panel-closed {
width: 0;
}
.ui-panel-position-left {
left: -@left-panel-width
}
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
-webkit-transform: translate3d(-@left-panel-width, 0, 0);
-moz-transform: translate3d(-@left-panel-width, 0, 0);
transform: translate3d(-@left-panel-width, 0, 0)
}
.ui-panel-position-right {
right: -@right-panel-width
}
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
-webkit-transform: translate3d(@right-panel-width, 0, 0);
-moz-transform: translate3d(@right-panel-width, 0, 0);
transform: translate3d(@right-panel-width, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: @left-panel-width;
right: -@right-panel-width
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(@left-panel-width, 0, 0);
-moz-transform: translate3d(@left-panel-width, 0, 0);
transform: translate3d(@left-panel-width, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -@left-panel-width;
right: @right-panel-width
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(-@right-panel-width, 0, 0);
-moz-transform: translate3d(-@right-panel-width, 0, 0);
transform: translate3d(-@right-panel-width, 0, 0)
}
@media (min-width:55em) {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: @right-panel-width
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: @left-panel-width
}
}
@popcorn245

This comment has been minimized.

Copy link

@popcorn245 popcorn245 commented Nov 27, 2013

I really appreciate this gist. I tried implementing something of a CSS variety before but yours has the same problem as mine did. The right panel is indeed twice the width of the left panel, but if you click anywhere on the left side of the right panel it closes. Something in jquery mobile is watching clicks and needs to be modified as well.

@popcorn245

This comment has been minimized.

Copy link

@popcorn245 popcorn245 commented Nov 27, 2013

Here is what fixed it. The dismiss was positioned incorrectly. Here is the fixed rules.

.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: @left-panel-width;
right: -@left-panel-width
}

.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -@right-panel-width;
right: @right-panel-width
}

@dawez

This comment has been minimized.

Copy link

@dawez dawez commented May 5, 2014

Really useful GIST. I added :

.ui-panel-animate.ui-panel-page-content-position-left {
    left: 0;
        right: 0;
        -webkit-transform: translate3d(@left-panel-width,0,0);
        -moz-transform: translate3d(@left-panel-width,0,0);
        transform: translate3d(@left-panel-width,0,0);
}

to push also the content correctly to the right when the left panel is open. I guess same should be done to the left push.

@Ponystream

This comment has been minimized.

Copy link

@Ponystream Ponystream commented Mar 30, 2016

I needed to add this to modify the right panel, thanks to dawez for the pattern and suggestion ;)

.ui-panel-animate.ui-panel-page-content-position-right {
  left: 0;
  right: 0;
  -webkit-transform: translate3d(-@right-panel-width,0,0);
  -moz-transform: translate3d(-@right-panel-width,0,0);
  transform: translate3d(-@right-panel-width,0,0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment