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


Tags: jquery,css,jquery-mobile,jquery-mobile-listview

Problem :

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/


    CSS Howto..

    How to create an image tag cloud

    How do I style my Django forms fields?

    How to “zoom”/“scale” in div's content with css or jquery?

    How can I get this css to display correctly in Chrome?

    how can i trigger multiple hover actions/events?

    How can I animate this?

    how to adjust the background color to the right height

    How to use absolute path of an image in css using jquery?

    how to align editor-label with editor-field in css

    How to make inner UL list not inherit from outer UL List in CSS

    how to center css class images with text?

    How to change the Home icon in Primefaces Breadcrumb?

    How to get Google menu buttons like styling using CSS

    How do I use CSS to add a non-rectangular border around an image?

    How can I get a label to right align in a table “cell” (td)?

    How to display first tab by default in css?

    How to persist CSS changes with Chrome Developer Tools

    How do I use CSS to select for a tag with arbitrary name attribute?

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    how to prevent css inherit?

    CSS frustration: How to center floating images of different widths inside LI tags?

    How to get correct overflow for proper div with fixed footer?

    How should I override hover style of a div in an anchor tag?

    How to Extract one images from bunch of image(Image Pack)?

    How can I force a list item to display on one line with CSS?

    How to make a very simple coloured 1-line text area?

    How to make the height of the div take all the space?

    How can I set a floats width to the left over space?

    How to overlap a child element of one div with`display:table-cell` over another div with `display:table-cell?`

    HTML5 contenteditable div: show placeholder only if div has 1 child