jquery mobile - forcing panel open on wider screens

Question

I\'ve been trying to test my jquery mobile app on multiple devices. I currently have a panel that is opened via swipe or clicking on a \'menu\' button.

However, on

Answer 1

I found a css-only solution for that issue that is much simpler. In the media query for your responsive panel @media (min-width:55em){...} add/overwrite the following css classes:

.ui-panel-closed {  width: 17em; }

.ui-panel-content-wrap.ui-body-c.ui-panel-animate.ui-panel-content-wrap-closed{     margin-left:17em; }

The second class might be different to yours depending on the swatch you are using; in this case it is "C". However, just take the content wrap class that wraps all your header,content, footer area.

In my example I used a panel with data-display="reveal" data-position="left" If you want it appearing on the right hand side just change margin-left:17em to margin-right:17em

If you want the panel to behave like "overlay", just forget about the second class i posted... Best regards