I want to open a dialog in combination with touchOverflowEnabled: true.
The problem is the following:
The dialog is coming up properly but after a couple of milliseconds, the background below the dialog turns from black into white; the page seems to shrink.
Furthermore, the checkboxes on the main page are smaller; they do not fit the complete page from left to right.
If I do not use touchOverflowEnabled: true everything works well.
Any ideas, how to solve this problem??
Here’s my complete sample code (the html-tags are missing):
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/icon.png" />
<link rel="apple-touch-startup-image" href="images/tablet_startup.png">
<link rel="stylesheet" href="css/black-tie/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" href="css/jquery-mobile/jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
touchOverflowEnabled: true,
defaultDialogTransition: 'pop',
orientationChangeEnabled: false
})
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
</head>
<body>
<!-- Begin objective page -->
<section id="questions_objectives" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Goals</h1>
</header><!-- /header -->
<div data-role="content">
<form id="f_objectives">
<h3>Personal Goals</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="o_1" id="o_1">
<label for="o_1">Goal 1</label>
<input type="checkbox" name="o_2" id="o_2">
<label for="o_2">Goal 2</label>
<input type="checkbox" name="o_3" id="o_3">
<label for="o_3">Goal 3</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer" data-id="pluginFooter" data-position="fixed">
<div align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
<a href="#logout_panel" data-rel="dialog" data-role="button" data-icon="home">Abmelden</a>
</div>
</footer><!-- /footer -->
</section><!-- /page -->
<!-- End objective page -->
<!-- Begin logout page -->
<section id="logout_panel" data-role="dialog">
<header data-role="header">
<h1>Logout</h1>
</header><!-- /header -->
<div id="section_logout" name="section_logout" data-role="content">
<h3>Would you like to receive emails?</h3>
<form id="logout_form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="logout_yes" id="logout_yes" checked="checked" onchange="setLogoutCB('YES')">
<label for="logout_yes">Yes</label>
<input type="checkbox" name="logout_no" id="logout_no" onchange="setLogoutCB('NO')">
<label for="logout_no">No</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer">
<div id="btn_logout" align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
<a href="#" data-role="button" data-icon="home" data-direction="reverse">Logout</a>
</div>
</footer><!-- /footer -->
</section>
<!-- End logout page -->
</body>
i would recommend u not to use touchOverflowEnabled anymore. It has its own issues and it wont even be there in jquery mobile from the version 1.1
its going to be deprecated.