Grouped listview with single list item does not render correctly

[jcohen]

A grouped listview containing a single list item is rendered without the rounded corners on the bottom.

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <li><a href="#somePage">My Lonely Row</a></li>
</ul>

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <li><a href="#someOtherPage">My Less Lonely Row</a></li>
    <li><a href="#someOtherPage">My Less Lonely Row</a></li>
</ul>

See: http://i.imgur.com/gvQTX.png for an example

[vsaar]

The underlying problem is that there is a mutually exclusive if-else-clause that checks, if it is the first or last list element. So in case it is both, only the first case is considered. The following patch fixes the issue:

diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 3e5200b..ffd8583 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -240,7 +240,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
                                                        .addClass( "ui-corner-tl" );
                                }
 
-                       } else if ( pos === li.length - 1 ) {
+                       } 
+                       
+                       if ( pos === li.length - 1 ) {
 
                                if ( o.inset ) {
                                        itemClass += " ui-corner-bottom";

[luebken]

Wanted to submit the same patch as vsaar.

[toddparker]

Can you submit this as a pull request?

[scottjehl]

inset listviews with a single item will get appropriate visual treatment. Closed by da1c615