JQuery мобильный фиксированный заголовок/нижний колонтитулы не работает

Question

Так я фиксированный заголовок JQM 1.1 следующим образом:

---- Begin Edit ----

По желанию, здесь более полный вид страницы:

<div id="listPage" data-role="page" class="page-ovveride"> 

     <div data-role="header" id="applicationHeader" data-theme="b" data-position="fixed"> 
      <h1 class="ui-title" role="heading" aria-level="1">Mobile</h1> 
     </div> 

     <div data-role="content" id="applicationContent"> 
      <ul id='ListTable' data-role="listview" data-inset='false'> 
       <!-- Placeholder for list table -->   
      </ul> 
     </div> 

     <div data-role="footer" id="applicationFooter" data-theme="b" data-position="fixed"> 
      <div id="navbar" data-role="navbar" > 
       <ul> 
        <li class="ui-btn-active"><a href="#listPage" id="list" data-icon="grid" data-transition="none">List</a></li> 
        <li><a href="#StuffPage" id="stuff" data-icon="star" data-transition="none">Stuff</a></li> 
        <li><a href="#MaorStuffsPage" id="moar" data-icon="alert" data-transition="none">Moar</a></li> 
       </ul> 
      </div> 
     </div> 

    </div> <!-- end list page --> 

Класс page-ovverride выглядит следующим образом. По какой-то причине я думаю, что JQM вставлял кучу отступов вверху и внизу, что вызывает проблемы. Это то, что класс выглядит следующим образом:

.page-ovveride { 
    padding-top:0 !important; 
    padding-bottom:0 !important; 
} 

и это, как я заполнение таблицы

$List.append(
    $('<li>').attr('id', id).append(
     $('<a>').attr('href','#newPage').attr('data-transition', 'slide').append(
     $('<h3>').text(name), 
     $('<p>').text(description) 
    ))); 

, а затем после цикла:

$List.listview('refresh'); 

---- END EDIT ----

Но по какой-то причине это не означает, что вещь появляется исправленной в любом браузере. Я рассматриваю 1.1 документы here, но это, похоже, не работает? Кто-нибудь знает, что происходит? Дайте мне знать, если вам нужно больше узнать об этом!

Спасибо!

---

обновление: даже если я выберу класс страницы-ovverride, он по-прежнему не работает. Что происходит!?

Answer 1

Я понял. Я включил устаревший файл из одной из моих самых ранних реализаций JQM, где я использовал ролик темы, который включал файл jquery.mobile.structure.css. Это было ovverriding много стилей и вызывало все виды whacky поведения. Надеюсь, что кто-то поможет!

Answer 2

Работы для меня: http://jsfiddle.net/XRKcX/1/. Возможно, вы забываете что-то включить?

Answer 3

Попробуйте это:

<div id="listPage" data-role="page" class="page-ovveride" data-fullscreen="true"> 
. 
. 
. 
. 
</div> 

Answer 4

Вот еще одна возможная причина: у меня была проблема фиксированного заголовка, который не работал на страницу с динамически добавленного контента. Оказалось, что если содержимое страницы было первоначально короче окна, jQueryMobile добавлял в мой заголовок класс «ui-fixed-hidden», который не удалялся при увеличении содержимого, превышающем окно.

я вылечил эту проблему, добавив следующую строку кода, сразу после написания содержимого в DIV на странице под названием resultsdiv:

resultsdiv.parents('.ui-page').find('.ui-header').removeClass('ui-fixed-hidden'); 

Это ужасно запущенным хак, но работает до сих пор.