How to change jQuery mobile side panel from push to overlay when switch from mobile view to tablet view

user_14963730 0
Viewed 180

I am currently working on a jQuery Mobile(JQM) project. I am using jquery.mobile-1.4.5 for this project. I am trying to implement a mobile and tablet responsive side menu panel with a fixed header.

in mobile view => panel width = 100%

in tablet view => panel width = 30%

I use the following @media code to achieve this.

@media all and (max-width: 35em) {
    .overlay{
        width: 100%
    }
  }
 
  @media all and (min-width: 45em) {
    .overlay{
        width: 30%
    }
  }

After run this code the fixed header overlap with the menu

tablet view

enter image description here

mobile view

menu overlap with fixed header

please help me to solve this issue.. or if there is any better solution to achieve this that would be great

This is the ui that i am expecting

in mobile view

enter image description here

in tablet view

enter image description here

NOTE : please don't get confused with the back button and the close button.

Thanks and best regards

jquery-mobile responsive css html jquery
1 Answers

You would have to solve two issues: switch panel display mode and set the panel width in percentage.

There are three types of panel: overlay, reveal and push. See here: Panel - jQuery Mobile Demos. When the panel widget is istanciated, there are different implementations depending from the display mode (or data-display attribute).

I believe You can avoid to swtch panel type. You would need to destroy and recreate the panel widget. Instead, I would suggest You to stick to panel overlay and use media query to adapt the panel width: the great ezanker has already an answer here for that: How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?.

There are a lot of classes involved, because inside the JQM CSS the panel width is fixed hard-coded at 17em.

You can also try to override the ui-panel-wrapper class and set the margin-left to 30% in tablet-view.

user_48455660
Related