Search code examples
jquerycssjquery-mobilejquery-mobile-listview

How do I adjust the spacing around the sides of list items in jquery mobile


I have a list of things like this:

 <ul data-role="listview" data-theme="c">
     <li><item 1/li>
     <li>item 2</li>
 </ul>

However, the sides of this keep stretching to the very end of the page. How could I add some kind of padding around the edges like in the api example found here: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-nested.html

I know I can add some css that would ajust the margin, However I don't want this to be added when viewing the page on a cell phone Thanks


Solution

  • Well you can go with a standard solution:

    <ul data-role="listview" data-theme="c" data-inset="true">
        <li><item 1/li>
        <li>item 2</li>
    </ul>
    

    Or you can go all commando like this:

    .ui-listview {
        margin: 20px !important;
    }
    

    Working example: http://jsfiddle.net/Gajotres/2PhBQ/