jQuery Forum

Add data-inset="true" to the listview.

data-inset is one way, but it might not be what you want.

It looks to me like you need some padding. Did you add some CSS to remove the default padding? There should be padding at the left/right.

It's up to you to adjust CSS to your own liking.

I do not recommend using listview if performance is important. It is a pig. It's probably the poorest-performance jQuery Mobile feature - especially when containing links, and even more especially the split-view.

Look at the generated HTML and you will see why. It's bloated.

Make your own list. It's not that hard. Listview is great for prototyping.

from my own experience its probably a syntax error in an object above the list.

could you share some more hints on "listview - it is a pig and the poorest-performance jqm feature"

I strongly suggest that anyone using JQM take a look at the generated HTML for a listview that contains links. For extra points, look at a split-button listview.

That's a lot of HTML! And a lot of class attributes! It is tremendously bulky.

Is all that HTML necessary? It is several times more HTML as is needed to do the job.

It does look nice, and is easy to use. It's a great prototyping tool.

It's not that hard to replace with your own HTML and CSS, but there is a caveat: it's easiest if you are using some backend that has templates and helpers. (e.g. Rails would be great). Then you can write a template or helper to generate a list item. Otherwise it would be quite painful to apply a complex list-item structure to long static lists.

An interim step that will get you some performance improvement without going whole-hog with your own list is to examine the generated HTML and to "pre-populate" the list items with the HTML and classes that the listview would create. Then don't use data-role="listview". Note that any dynamic features of the listview (not sure there are any?) will not work, since you will never instantiate a widget. Bascially, you are just borrowing the listview's CSS.

However, the listview's CSS is very limiting, and you still have to replicate the listview's bulky HTML structure. Even so, this gains a great deal of performance, as there is no Javascript construction of the listview, and the time normally spent doing that is saved.

I'd urge your to just write your own list items with a simplified HTML structure and classes, and then you won't have to fight with the existing CSS to get it to look just the way you want it to look.

If you are producing static content, then I think it is nearly impossible to produce a JQM site without using a static site generator. I use one called Middleman. It gives you templates and helpers like Rails, but instead of being used on a server, it produces a static site.

I don't have any samples. It's just an HTML list, and CSS to style it! You can probably find thousands of examples on the net and in books. It's what you'd do if you didn't have the list view. You know - make a list, and then style it.

A reasonable approach is to write your own HTML/CSS for lists that are long or used a great deal, and use a listview for other lists. However, this does mean you have to stick to the standard JQM listview appearance.