Items filtered from listview missing a border #4614

Closed
SpidrrMan opened this Issue Jun 27, 2012 · 6 comments

Comments

Projects
None yet
3 participants
@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.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 27, 2012

Member

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

Member

jaspermdegroot commented Jun 27, 2012

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

@ghost ghost assigned jaspermdegroot Jun 27, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jun 27, 2012

Contributor

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" reply@reply.github.com wrote:

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


Reply to this email directly or view it on GitHub:
#4614 (comment)

Contributor

toddparker commented Jun 27, 2012

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" reply@reply.github.com wrote:

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


Reply to this email directly or view it on GitHub:
#4614 (comment)

@SpidrrMan

This comment has been minimized.

Show comment
Hide comment
@SpidrrMan

SpidrrMan Jun 27, 2012

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

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 27, 2012

Member

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

Member

jaspermdegroot commented Jun 27, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@SpidrrMan

SpidrrMan Jun 27, 2012

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

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 27, 2012

Member

@SpidrrMan

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

Member

jaspermdegroot commented Jun 27, 2012

@SpidrrMan

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

jaspermdegroot added a commit that referenced this issue Jul 13, 2012

Listview: Added a class to set border-bottom on the last LI. This Fixes
… missing border on filtered lists and on browsers that don't support :last-child. Fixes #4614 - Items filtered from listview missing a border.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment