Skip to content
This repository
Browse code

Listview: Added a class to set border-bottom on the last LI. This fix…

…es missing border on filtered lists and on browsers that don't support :last-child. Fixes #4614 - Items filtered from listview missing a border.
  • Loading branch information...
commit 22ef7fb27f32a9c2fc0d84c7d0c86e0a00496737 1 parent 73e1e97
Jasper de Groot authored July 13, 2012
2  css/structure/jquery.mobile.listview.css
@@ -10,7 +10,7 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
10 10
 ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
11 11
 ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
12 12
 .ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
13  
-.ui-li:last-child, .ui-li.ui-field-contain:last-child { border-bottom-width: 1px; }
  13
+.ui-li-last, .ui-li.ui-field-contain.ui-li-last { border-bottom-width: 1px; }
14 14
 .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
15 15
 .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
16 16
 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb  { min-height: 60px; padding-left: 100px; }
15  js/widgets/listview.js
@@ -62,11 +62,14 @@ $.widget( "mobile.listview", $.mobile.widget, {
62 62
 			$topli,
63 63
 			$bottomli;
64 64
 
65  
-		if ( this.options.inset ) {
66  
-			$li = this.element.children( "li" );
67  
-			// at create time the li are not visible yet so we need to rely on .ui-screen-hidden
68  
-			$visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );
  65
+		$li = this.element.children( "li" );
  66
+		// at create time the li are not visible yet so we need to rely on .ui-screen-hidden
  67
+		$visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );
69 68
 
  69
+		// ui-li-last is used for setting border-bottom on the last li		
  70
+		$li.find( ".ui-li-last" ).removeClass( "ui-li-last" );
  71
+					
  72
+		if ( this.options.inset ) {
70 73
 			this._removeCorners( $li );
71 74
 
72 75
 			// Select the first visible li element
@@ -86,7 +89,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
86 89
 
87 90
 			// Select the last visible li element
88 91
 			$bottomli = $visibleli.last()
89  
-				.addClass( "ui-corner-bottom" );
  92
+				.addClass( "ui-corner-bottom ui-li-last" );
90 93
 
91 94
 			$bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
92 95
 				.find( ".ui-li-link-alt" )
@@ -95,6 +98,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
95 98
 				.find( ".ui-li-thumb" )
96 99
 					.not( ".ui-li-icon" )
97 100
 					.addClass( "ui-corner-bl" );
  101
+		} else {
  102
+			$visibleli.last().addClass( "ui-li-last" );
98 103
 		}
99 104
 		if ( !create ) {
100 105
 			this.element.trigger( "updatelayout" );

0 notes on commit 22ef7fb

Please sign in to comment.
Something went wrong with that request. Please try again.