All geek questions in one place

Set size for jQuery Mobile?

By default, jQuery Mobile fills the entire width of the screen. Is there a way to specify the size jQuery Mobile should fill in, for example, provide an item to fill in?

+4
source share
3 answers

Just set this line in your CSS file. Make it very easy. Change the maximum width to width if you want.

.ui-page {maximum width: 500 pixels; }

+3
source

You can simply specify this using CSS ...

For instance:

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:

 $("div[data-role='page']").css('width',$("#container_element").innerWidth()+"px");
0
source

Size automatically. 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.

0
source

Source: https://habr.com/ru/post/1342363/

More articles:


All Articles