jQuery Mobile panel between header and footer

Written by on April 7, 2015

jQuery Mobile panel between header and footer

Sometimes you will need to show jQuery Mobile panel between the page header and footer, but how can we do that? Before we can do that we will need to calculate a correct height of the viewport, header and footer. The subtracting height of both toolbars from viewport’s height will give you the height of the space between both toolbars. In the end, we need to push the panel down by overriding top style of the panel.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!


You will find a code and a working example below. Because plnkr.co is sometimes unavailable, you can copy attached code.

<!DOCTYPE html>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="script.js"></script>

  <div data-role="page" id="index">
    <div data-role="panel" id="myPanel" data-display="overlay">
      <h2>Panel Header</h2>
      <p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
    <div data-role="header">
      <h1>Page Header</h1>
    <div data-role="main" class="ui-content">
      <p>Click on the button below to open the Panel.</p>
      <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
    <div data-role="footer" data-position="fixed">
      <h1>Page Footer</h1>

 $(document).on("pagecreate", "#index", function(e) {
   var activePage = this;
   $("#myPanel").one("panelbeforeopen", function() {
     var screen = $.mobile.getScreenHeight(),
       header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
       footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
       panelheight = screen - header - footer;
       'top': header,
       'min-height': panelheight

As you can see, we are doing this task during the pagecreate event, but we can use any other event. If your application is using any 3rd party widget that can cause page to change header and footer height it is advisable to replace pagecreate with pageshow. Because pageshow will trigger only when everything is loaded/enhanced into the DOM it can be successfully used for correct header/content/footer height calculations.

Next thing we need to do is trigger an action before panel is opened for the first time. It can be done via panel panelbeforeopen event. We will use this event to calculate available panel height dividing the viewport height with header and footer height.

Finally, we will manually set panel min-height plus panel top position. Min-height will be viewport height minus header height minus footer height. Panel top position value is equal to header height.

Working example

Working Plunker example can be found here:


Embedded example:

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.


2 thoughts on “jQuery Mobile panel between header and footer”

Leave a Reply