New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Corner styling issue with listview refresh on growing lists #1470

Closed
pamelafox opened this Issue Apr 19, 2011 · 5 comments

Comments

Projects
None yet
4 participants
@pamelafox

Steps to replicate:

  1. Create an empty UL in HTML.
  2. Add LIs to it one at a time, calling refresh after each one.
  3. The top LI will be mis-styled, with the bottom-corner class names still applied even after subsequent LI additions.
    Demonstration: http://imagine-it.org/jquerymobile/listview_wrong.html

Workaround is to only refresh after adding all of them: http://imagine-it.org/jquerymobile/listview_right.html

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 19, 2011

Contributor

Thanks for the demo pages. We'll take a look.

Contributor

toddparker commented Apr 19, 2011

Thanks for the demo pages. We'll take a look.

@hakanson

This comment has been minimized.

Show comment
Hide comment
@hakanson

hakanson May 18, 2011

Contributor

Probably should fix this one along with jquery/jquery-mobile#1450 since the both have to do with clearing or applying corner styling to the list. It would be nice if the listview.filter could call into the listview widget to apply corner styling, since it is not only the list, but the .ui-li-link-alt and .ui-li-thumb children that get corner styling as well. I can't seem to find a clean way of doing that.

Also, it looks like there is another bug on applying ui-corner-tl or ui-corner-bl the .ui-li-thumb, since this code comes before the call to self._itemApply, which is what adds the .ui-li-thumb class. You can see this by looking closely at "Thumbnail, split button list" at the lists inset example.

Contributor

hakanson commented May 18, 2011

Probably should fix this one along with jquery/jquery-mobile#1450 since the both have to do with clearing or applying corner styling to the list. It would be nice if the listview.filter could call into the listview widget to apply corner styling, since it is not only the list, but the .ui-li-link-alt and .ui-li-thumb children that get corner styling as well. I can't seem to find a clean way of doing that.

Also, it looks like there is another bug on applying ui-corner-tl or ui-corner-bl the .ui-li-thumb, since this code comes before the call to self._itemApply, which is what adds the .ui-li-thumb class. You can see this by looking closely at "Thumbnail, split button list" at the lists inset example.

@hakanson

This comment has been minimized.

Show comment
Hide comment
@hakanson

hakanson May 18, 2011

Contributor

Looks like jquery/jquery-mobile#1576 by @mfn is a duplicate of this. However, the bottom corner is easier to see in that example because it is data-role="list-divider" (see image @ http://i.imgur.com/3lkFs.png?7150 ).

Contributor

hakanson commented May 18, 2011

Looks like jquery/jquery-mobile#1576 by @mfn is a duplicate of this. However, the bottom corner is easier to see in that example because it is data-role="list-divider" (see image @ http://i.imgur.com/3lkFs.png?7150 ).

@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin May 18, 2011

Member

I created a fiddle for that issue: http://jsfiddle.net/ghislain/d8gSH/

Member

gseguin commented May 18, 2011

I created a fiddle for that issue: http://jsfiddle.net/ghislain/d8gSH/

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 18, 2011

Contributor

@hakanson - Yep, I've added the "gseguin" tag to all the list issues so Ghislain can look at these list issues all at once. Feel free to tag related issues the same way.

Contributor

toddparker commented May 18, 2011

@hakanson - Yep, I've added the "gseguin" tag to all the list issues so Ghislain can look at these list issues all at once. Feel free to tag related issues the same way.

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue May 18, 2011

Ghislain Seguin
Added test for issue #1470
Corner styling issue with listview refresh on growing lists

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue May 18, 2011

Ghislain Seguin
Fix for issue #1470
Modified _removeCorners so it takes which corner to remove as a parameter
Now removes the bottom corners of first list item if it is followed by another one.

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue May 18, 2011

Ghislain Seguin Ghislain Seguin
Fix for #1470
Corner styling issue with listview refresh on growing lists

@ghost ghost assigned gseguin Jun 20, 2011

gseguin added a commit that referenced this issue Jun 29, 2011

@gseguin gseguin closed this Jun 29, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment