soundly_typed
soundly_typed

Reputation: 40336

Set Size for jQuery Mobile?

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

Answers (3)

commadelimited
commadelimited

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

naugtur
naugtur

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

JRomero
JRomero

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

Related Questions