Home/ Questions/Q 9286375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T19:24:11+00:00

I’m currently playing around with JQuery Mobile. My idea is to create a page

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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; } 
}
    • 0