Search code examples
javascriptjquery-mobilescrollpopupoverflow

Why popup scrolling on jQuery mobile not working?

I'm using jquery.mobile-1.4.5. My case is the scrolling is not working on my apps.

This code is my index.html for the data in my get it from the JSON on my web service.

<div role="main" class="ui-content">
  <div data-role="popup" id="popupBasic" data-transition="slideup" style="height: 500px;">
    <div data-role="header" style="background: none;">
      <h1 class="poppinmedium" style="font-size:14px;">Detail Information</h1>
    </div>
    <div class="content">
      <div class=" img-responsive" id="img-container" style="text-align: center;"></div>
      <h4 id="poi-detail-title" class="poppinmedium" style="text-align: center;"></h4>
      <!-- <h4 style="text-align: center;" class="poppinthin">Distance:
          <span id="poi-detail-distance" class="poppinthin"></span>
      </h4> -->
      <h4 id="poi-detail-description" class="poppinthin"></h4>
    </div>
  </div>
</div>

Here the code of CSS for my popup.

.ui-popup-container {
  z-index: 1000;
  display: inline-block;
  position: absolute;
  /* background: #fff; */
  padding: 0;
  outline: 0;
  /* overflow: auto; */
  max-width: 100% !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100%;
}

.ui-popup {
  border-radius: 20px 20px 0px 0px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 10px;
}

Here's the code for open the popup and scroll it. But it's not working:

$('#popupBasic').popup('open');
$('#popupBasic').on({
  popupafteropen: function() {
    var maxHeight = 400;
    $('#popupBasic').css('max-height', maxHeight + 'px');
    $('#popupBasic').css('overflow', 'auto');
  }
});
Solution

  • Why You need that z-index ? JQM is already setting its own z-index. For instance, the popup screen overlay (which is trapping the clicks outside the popup) has z-index 1099 and the popup container (used for borders and default close buttons) has z-index 1100.

    If You need a popup with auto scrollable content, set the overflow of the popup content.

    DEMO:

    $(function(){
  var longText = ['<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>',
    '<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>',
    '<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>'
    ].join('');

  $('#popupBasic').on({
    popupafteropen: function() {
      var maxHeight = 400;
      $('#popupBasic .ui-content').css({
        'max-height': maxHeight + 'px',
        'overflow': 'auto'});
      setTimeout(function(){ 
        $("#popupBasic .ui-content").html(longText);
      }, 1000);
    },
    popupafterclose: function() {
      $("#popupBasic .ui-content").html("");
    }
  });
});
    /* 12 px is the JQM default blur for box-shadows */
.ui-popup-container {
  max-width: 100% !important;
  top: auto !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
}
    <!DOCTYPE html>
<html>
  <head>
    <title>Scrollable Popup</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Scroll Popup</h1>
        <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-gear ui-btn-icon-notext ui-btn-right">Open</a>        
      </div>
      <div role="main" class="ui-content"></div>
      <div id='popupBasic' data-role='popup' data-transition="slideup" data-history="false" style="height: 500px;">
        <div data-role="header" class="ui-bar ui-bar-inherit" style="background: none;">
          <h1 style="font-size:14px;">Detail Information</h1>
          <a href="" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        </div>
        <div class="ui-content"></div>
      </div>
    </div>
  </body>
</html>