Reputation: 40336
By default, jQuery Mobile fills the entire width of the screen. Is there a way to specify the size that jQuery Mobile should fill, such as providing an element to fill?
Upvotes: 4
Views: 8398
Reputation: 5119
Just set this line in your CSS file. Make it really easy. Change max-width to width if prefer.
.ui-page { max-width: 500px; }
Upvotes: 3
Reputation: 16915
The size is automatic. If you create a div
outside the page div and set it to float and width in pixels - it should display correctly next to the page div.
Upvotes: 0
Reputation: 4868
You can simply specify this through CSS...
For example:
CSS
#wrapper {width:95%}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</div>
</body>
</html>
You can also do this dynamically by:
$("div[data-role='page']").css('width',$("#container_element").innerWidth()+"px");
Upvotes: 0