Android Jquery ListView過濾器廢棄佈局

Question

我嘗試在Android 4.1.2中使用過濾器做一個簡單的listview，它看起來像固定的頁眉/頁腳位置一樣破壞了固定的佈局，並且listview不再適合屏幕，你點擊過濾器框。

這是一個錯誤或我的代碼有問題。以下是簡單的代碼：

<ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true"> 
    <li data-role="list-divider">A</li> 
    <li><a href="index.html">Adam Kinkaid</a></li> 
    <li><a href="index.html">Alex Wickerham</a></li> 
    <li><a href="index.html">Avery Johnson</a></li> 
    <li data-role="list-divider">B</li> 
    <li><a href="index.html">Bob Cabot</a></li> 
    <li data-role="list-divider">C</li> 
    <li><a href="index.html">Caleb Booth</a></li> 
    <li><a href="index.html">Christopher Adams</a></li> 
    <li><a href="index.html">Culver James</a></li> 
</ul> 

截圖：http://postimg.org/image/3xs0dqu7v/

Answer 1

嘗試用正確的HTML標記。 DEMO http://jsfiddle.net/yeyene/AeXnV/8/

我想你忘了<div data-role="content">？

<div data-role="page"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Page Title</h1> 
    </div> 

    <div data-role="content"> 
     <ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true"> 
      <li data-role="list-divider">A</li> 
      <li><a href="index.html">Adam Kinkaid</a></li> 
      <li><a href="index.html">Alex Wickerham</a></li> 
      <li><a href="index.html">Avery Johnson</a></li> 
      <li data-role="list-divider">B</li> 
      <li><a href="index.html">Bob Cabot</a></li> 
      <li data-role="list-divider">C</li> 
      <li><a href="index.html">Caleb Booth</a></li> 
      <li><a href="index.html">Christopher Adams</a></li> 
      <li><a href="index.html">Culver James</a></li> 
     </ul> 
    </div> 

    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

Answer 2

感謝您的回覆。我發現了這個問題。它是由foot =中的class =「ui-bar」引起的。如果我刪除了這個class =「ui-bar」，它修復了右側佈局問題，但是頁眉和頁腳不再固定。在這裏，我粘貼代碼來重現問題。問題出在PhoneGap上，我不知道其他瀏覽器是否存在問題。

<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
    <h1>Page Title</h1> 
</div> 

<div data-role="content"> 
    <ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true"> 
     <li data-role="list-divider">A</li> 
     <li><a href="index.html">Adam Kinkaid</a></li> 
     <li><a href="index.html">Alex Wickerham</a></li> 
     <li><a href="index.html">Avery Johnson</a></li> 
     <li data-role="list-divider">B</li> 
     <li><a href="index.html">Bob Cabot</a></li> 
     <li data-role="list-divider">C</li> 
     <li><a href="index.html">Caleb Booth</a></li> 
     <li><a href="index.html">Christopher Adams</a></li> 
     <li><a href="index.html">Culver James</a></li> 
    </ul> 
</div> 

<div data-role="footer" class="ui-bar" data-position="fixed"> 
    <a href="javascript:void(0)" id="emailCode" data-role="button" 
      data-icon="star">Email</a> 
</div>