Ion-item-group padding


#1

Going through @smichelotti’s Ionic2 course on PluralSight… using this snippet:

<ion-content padding>
  <ion-list>
    <ion-item-group *ngFor="let division of teams">
      <ion-item-divider color="secondary">{{division.divisionName}}</ion-item-divider>
      <button *ngFor="let team of division.divisionTeams" ion-item (click)="itemTapped($event, team)">
        {{team.name}}
      </button>
    </ion-item-group>
  </ion-list>
</ion-content>

In the video, this renders as (secondary coloration extends to screen edges):

But in my browser it renders as (seconday coloration restricted by ion-item-group width):

Ionic Framework: 2.0.0-rc.4
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.1
OS Platform: Linux 4.6
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36

What’s the trick to get the secondary coloration of the ion-item-divider to extend to the edges of the screen?


#2

Sorted it out for myself. Just had to remove the padding attribute from the ion-content element.