jQuery Mobile panel screen positioning

Question

I am using JQuery Mobile, and I have a panel that appear on the right of the screen, is it possible to have the panel appear on the right column (middle of the page) and not to the far right of the screen.

Answer 1

I found a way to place the panel in-between my header and footer. I just added data-position ="fixed" to my header section and it worked like a charm.

<div data-role="header" data-position="fixed">

Answer 2

jQuery mobile panels are positioned absolutely. So, if the panel has a defined width, you can give it these CSS attributes:

#panel {
width: xx; /* width of the panel */
left: 50%;
margin-left: -xx; /* subtract half the width of panel */
}

Then it should appear in the middle of the page.