Search code examples
jquery-mobilejquery-mobile-popup

How to fix this layout issue in JQuery Mobile


I created a popup with a listview inside. I also applied a list filter. However, it is not correctly formatted. Is there any way I can push it up a bit (like a list divider would be)?

EDIT: the code

<div data-role="content">
  <div data-role="popup" id="popupMenu" data-theme="d">
    <ul data-role="listview" data-inset="true" id="symptomslist" style="min-width:210px;" data-theme="d" data-filter="true">
    </ul>
  </div>
</div>

The filter items field is not properly positioned


Solution

  • To get best results of jQuery Mobile styles of contents inside page, dialog, panel or popup, always place them inside data-role="content".

    <div data-role="popup" id="popupMenu" data-theme="d">
      <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
          <!-- list items -->
        </ul>
      </div>
    </div>
    

    Demo