I have a problem with a panel. I want to keep it open when a user uses tablet that has width 560px or wider, so it acts like a nav menu..

I used the "pagebeforeshow" event to manually open the panel every time the page transition is triggered. I also used the "responsive panel" media css markup provided in panel api documentation to add the 17em "right margin" to content and header in order to use them together with the opened panel..

But the problem is that if I open the panel on "pagebeforeshow" event, the content and header are not wrapped inside the screen. Instead, they are moved outside the screen like on the normal panel behaviour. 

However, if I open the panel on the button click, the content gets wrapped correctlly.

What is the issue with the css media query, so the content isnt wrapped with the 17em margin on pagebeforeshow event? How can i keep the panel open all the time so it acts like a nav menu on tablets?

Thank you for your answers,

Miha