1

I am trying to use jquery mobile panels and it hides the slider when I open the panel, it removes/hides the slider. Adding rel="external" to the button for panel doesn't do anything as it is not a link to physical page.

Here is an example given in fiddle:

http://jsfiddle.net/dhavaljani/zZKhT/

Html for panel

<div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="d" data-content-theme="d">`
  <ul data-role="listview" data-theme="d" data-icon="false">
    <li><a href="#" data-icon="false">Home</a></li>
    <li><a href="#" data-icon="false">Services</a></li>
    <li><a href="#" data-icon="false">Case Studies</a></li>
    <li><a href="#" data-icon="false">About Us</a></li>
    <li><a href="#" data-icon="false">Contact Us</a></li>
  </ul>
  <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-e ui-icon-phone ui-btn-icon-left ui-btn-inline orange-btn">123-456-7890</a>
</div>
Systematix Infotech
  • 2,345
  • 1
  • 14
  • 31
Dhaval
  • 13
  • 2

1 Answers1

0

This is a bug in jQuery Mobile 1.4, as panel when first opened, it wraps it's siblings in a <div class="ui-panel-wrapper"> other than header and footer.

This problem isn't present in previous versions of jQuery Mobile. 

<section class="slider ui-panel-wrapper">
 <!-- elements -->
</section>

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112
  • @ezanker yea, https://github.com/jquery/jquery-mobile/issues/6885 no answer whatsoever. it's completely neglected. – Omar Jan 10 '14 at 17:49
  • 1
    Thanks Omar and ezanker. Yes I saw that it worked with data-display="overlay" but it kills the feel of the mobile navigation and also gets tricky if you have another icon/link on left side of header as users tend to click there to close the panel. – Dhaval Jan 10 '14 at 23:14