jQuery Mobile Dialog Page - Fixed Head Header

Question

Я могу получить исправленные заголовки для правильной работы на других страницах, но когда я пытаюсь сделать это на странице с data-dialog="true", она не работает. Это ограничение диалогового окна?

Обратите внимание, что я использую следующие CSS для обеспечения высоких прокрутки диалогов:

.ui-dialog-contain { 
    max-height: 500px; 
    overflow:hidden; 
    overflow-y: scroll; 
} 

Моего код выглядит следующим образом:

<div data-role="page" data-dialog="true" id="dialog_page" > 

    <div data-role="header"> 
     <h1>Header</h1> 
    </div><!-- /header --> 

    <div role="main" class="ui-content"> 
     <!-- lots of content removed --> 
    </div><!-- /content --> 

</div> 

Answer 1

Вы можете установить максимальную высоту и прокрутку содержание DIV вместо всего диалога:

.ui-dialog-contain .ui-content{ 
    max-height: 450px; 
    overflow:hidden; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
} 

: DEMO