The following Jquery code produces a scroll bar in a opera mini mobile emulator browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>buttons_create_avoid</title>
<meta name="description" content="" />
<meta name="author" content="siddarth" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="./Jquery library/themes2/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="./Jquery library/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="./Jquery library/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role = "page" data-theme = "b">
<div data-role = "header">
<h1>This is Buttons Page</h1>
</div>
<div data-role = "content">
<button>Button</button>
<input type="submit" value="submit" data-corners = "false" /> <!-- If data-corners is false then square button -->
<input type="reset" value="reset" data-icon = "home"/> <!-- A pic is inserted in the button -->
<input type = "submit" value = "This button fits to the length of the word" data-inline />
<input type="submit" value = "submit" data-shadow = "false" /> <!-- Now this button has no shadow like other -->
<p>Now The standard Jquery buttons will not be created, cos of: data-role = "none"</p>
<input type = "submit" value="submit" data-role = "none" />
</div>
</div>
</body>
</html>
Most of the jQuery mobile pages produces that annoying vertical navigation or the scroll bar, when I open this page in the mobile emulator.
What is the reason for this.?
