Question

Listview has a data-inset property to make its corners rounded. However, I can’t use listview because my list is a nested list and the frameworks default behavior is hide the nested list and show it once the its primary list is clicked. So, I chose to use a ui-grid view inside the primary listview row which looks like below:

<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>

My problem is the ui-grid’s corners should be rounded. I tried to put data-inset=”true” but didn’t work.

Answer 1

You can use the classes that jQuery Mobile adds to widgets, in this case you’re looking for the ui-corner-all class which puts corners on all four corners, and then you will probably want the box-shadow that ui-shadow applies:

<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">

I added the padding because the grid element didn’t have any by default. Also there are the ui-corner-top and ui-corner-bottom classes that only round the top/bottom of the element to which they are applied.

Here is a demo: http://jsfiddle.net/VXrxv/

If instead you want to round the li element that is the parent of the ui-grid element you can add margin to them:

<li class="ui-corner-all ui-shadow" style="margin: 5px;">

Here is a demo: http://jsfiddle.net/VXrxv/1/