When the list view is used with the filter, sometimes the trailing border is omitted.
Run the demo on the jquerymobile site, goto listviews then search filter bar (http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html)
You should see a list of car manufacturers.
Type the letters vol int the search bar. You are left with 2 entries with a top border on each entry and a bottom border on the last.
Add a k to the search word (making volk) and you are left with just Volkswagen. It has a top border but NO bottom border.
Change the search phrase to volv and you get a single entry for Volvo and this has a top and bottom border.
I believe this is because the last < li> has an additional class added to it, but when the entry is hidden because of the filter the class is not moved to the last visible entry.
This is really obvious on short lists.
This occurs in the latest version of jqm and is repeatable on the jquerymobile.com documentation / examples.
Not a show stopper but looks odd.
Thanks for reporting the issue.
The cause of this is that the bottom border is only added to the last item of the list by using the :last-child pseudo class selector. That doesn't distinguish hidden and visible elements. So you only see the bottom border in that example when "Volvo" is in view, because that is the last item in the original list.
Older browsers like IE7 and IE8 don't support the :last-child selector, so on those you will never see a border at the bottom of the list.
@toddparker - What do you think about changing this to a "listview last item" class added by the framework?
One thought I had was simply to add the styling to the ul. That way the border is always at the bottom of the list.
@SpidrrMan - Thanks for the suggestion but that solution doesn't fit in the way the framework is designed. The border style is specified by the button class and changes on hover, down and active. That can't be used on the ul element.
As a matter of interest and its probably related to this, the inset lists lose the rounded corners when filtered.
If you repeat the test on the Inset search filter bar (http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/lists/lists-search-inset.html) you'll see an example of what I mean.
Again not a show stopper and it degrades gracefully but just looks odd.
Thanks for the heads up. Will look into that as well.
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.