Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Items filtered from listview missing a border #4614
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?
If its not too heavy to add the class, I'm good with this change.
On Jun 27, 2012, at 5:19 AM, "Jasper de Groot" email@example.com wrote:
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.