Question

I am developing our mobile application in jQuery Mobile and PhoneGap. Each of our main pages will have a listview for displaying various types of data. If the app is running on a tablet, or in a landscape view where the screen is larger than certain width, I’d like the listviews to have the data-inset property set to true, and be rendered with rounded corners and borders. If it’s on a smaller screen that is under the predefined width, I’d like it to not have the inset property.

In my function, I do something like this to set the data-inset property:

var list = $("#testlist");
list.data("inset", true);
list.listview("refresh",true);

However, this doesn’t update the list. It stays formatted to fit the full width of the screen. How should I accomplish this goal? I thought about manually adding the styles, but I’d have to not only add it to the list, but each list item. Is there a way I can just toggle the data-inset property and trigger the framework to restyle it?

Here’s a semi-working jsFiddle that mimics what I am trying to do: http://jsfiddle.net/GQgV9/12/

Answer 1

There is no civilized way to do that. Refreshing will only update widget’s internals. In order to make the list inset, you have to:

1. Set inset classes on the <ul>, .i.e. ui-listview-inset and ui-corner-all.
2. Set inset option via .listview('option', 'inset', true).
3. Refresh widget because otherwise list items won’t have round corners.

Here is the modified version of your jsFiddle:
http://jsfiddle.net/GQgV9/13/