Skip to content
This repository

Items filtered from listview missing a border #4614

Closed
SpidrrMan opened this Issue June 26, 2012 · 6 comments

3 participants

SpidrrMan Jasper de Groot Todd Parker
SpidrrMan

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.

Jasper de Groot
Owner

@SpidrrMan

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?

Todd Parker
SpidrrMan

@toddparker
@uGoMobi

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.

Jasper de Groot
Owner

@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.

SpidrrMan

@uGoMobi

OK.

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.

Jasper de Groot
Owner

@SpidrrMan

Thanks for the heads up. Will look into that as well.

Jasper de Groot uGoMobi closed this issue from a commit July 13, 2012
Jasper de Groot 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.
22ef7fb
Jasper de Groot uGoMobi closed this in 22ef7fb July 13, 2012
Jasper de Groot uGoMobi referenced this issue from a commit July 13, 2012
Jasper de Groot 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.
75a3635
Elliot Smith townxelliot referenced this issue from a commit July 30, 2012
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.