I can get fixed headers to work correctly on other pages but when I try to do it in a page that has data-dialog="true" it doesn't seem to work. Is this a limitation of the dialog box?
Note that I'm using the following CSS to allow for tall scrollable dialogs:
.ui-dialog-contain {
max-height: 500px;
overflow:hidden;
overflow-y: scroll;
}
My Code is as follows:
<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>
You can set the max height and scrolling of the content div instead of the entire dialog:
.ui-dialog-contain .ui-content{
max-height: 450px;
overflow:hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
Here is a DEMO
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments