CODEWITHSUNDEEP
javascriptjquerycssjquery-mobileweb
MOnsDaR
MOnsDaR

Reputation: 8664

JQuery Mobile: Place elements side-by-side/below - Depending on Platform

I'm currently playing around with JQuery Mobile. My idea is to create a page which displays a various amount of lists (at least one, maximum will be ~10).

When placing them on a page, the lists will fill out the whole horizontal space. They then are placed below each other.

This is fine when opening the page on a small telephone screen, but it does not look good on devices with a bigger screen size (tablets, desktop-browsers). Of course I could use a Grid to place them side by side, but this leads to a bad design on small-screen devices.

The best case would be that I open the page in my Desktop-browser, change the size of it and the lists replace themselves according to the screen size. On telephone-displays they would always be placed below each other.

Is it possible to display the lists depending on the screen-size automatically?

Please take also in mind that I do not always know how many lists a user will create.

Upvotes: 2

Views: 1591

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Here's an working example: http://jsfiddle.net/Gajotres/Yz3nS/

Because jQuery Mobile requires a HTML5 enabled browser you need to use a css media queries, they will give you maximum flexibility.

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 1</li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 2</li>                
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 3</li>                
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 4</li>                
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>            
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

And CSS :

ul { 
float: left; width: 100% !important; 
}

/* iPhone Horizontal -------------------*/ 
@media all and (min-width: 480px){  
ul { width: 100% !important; } 
}       

/* iPad Verticle -----------------------*/ 
@media only screen and (min-width: 768px) {
ul { width: 50% !important; } 
}  

/* iPad Horizontal ---------------------*/ 
@media only screen and (min-width: 1024px) {     
ul { width: 50% !important; } 
}  

/* Nexus 7 Horizontal ------------------*/ 
@media only screen and (min-width: 1280px) {     
ul { width: 33.3333333% !important; } 
}  

/* Laptop 1440 -------------------------*/ 
@media only screen and (min-width: 1440px) {     
ul { width: 33.3333333% !important; } 
}  

/* Monitor 1600 ------------------------*/ 
@media only screen and (min-width: 1600px) {
ul { width: 25% !important; } 
}  

/* Monitor 1920 ------------------------*/ 
@media only screen and (min-width: 1920px) {     
ul { width: 20% !important; } 
}

Upvotes: 3

Robot Woods
Robot Woods

Reputation: 5687

You could set a max-width in the style for the list, and float them left, that way they'll automatically stack up if the screen is narrow. You could also look into media queries, and only use the 100% width if the screen is smaller than some value

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.list {width:100%; max-width:500px; float:left;display:block;border:thin solid black;min-height:50px;}
</style>
</head>
<body>
<div class="list"></div><div class="list"></div><div class="list"></div><div class="list"></div><div class="list"></div>
</body>
</html>

Upvotes: 1

Related Questions