Skip to content
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

ion-item-group/ion-list-divider border not reaching end #6518

Closed
amitailanciano opened this issue May 13, 2016 · 1 comment
Closed

ion-item-group/ion-list-divider border not reaching end #6518

amitailanciano opened this issue May 13, 2016 · 1 comment
Assignees
Milestone

Comments

@amitailanciano
Copy link

Short description of the problem:

ion-item-group and ion-list-divider styling is not consistent with ion-list and ion-list-header, border does not reach the side of the list

screen shot 2016-05-13 at 12 43 55 am

#### What behavior are you expecting?

border reaches to the side of the list

Steps to reproduce:

  1. put any ion-item-divider inside or outside of ion-item-group
<ion-item-group>
        <ion-item-divider light>Settings</ion-item-divider>
        ... some <ion-item>'s ...
        <ion-item-divider light>Settings</ion-item-divider>
        ... some <ion-item>'s ...
</ion-item-group>

Which Ionic Version? 1.x or 2.x

2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/S0jMjZvunRrD7rG9LG5s?p=preview


Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.0.0
Xcode version: Xcode 7.3.1 Build version 7D1014
@brandyscarney
Copy link
Member

So iOS is correct with the item-group borders where the last item in a group doesn't have a border. The recommended markup is:

<ion-item-group>
  <ion-item-divider>
    Group 1
  </ion-item-divider>

  <ion-item>
    ...
  </ion-item>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    Group 2
  </ion-item-divider>

  <ion-item>
    ...
  </ion-item>
</ion-item-group>

I fixed Material Design to work the same as iOS:

screen shot 2016-05-20 at 10 57 44 am
screen shot 2016-05-20 at 10 58 02 am

Thanks for the issue!

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants