Ionic-framework: V2 - item-right nested in ion-list-header renders poorly

[danbucholtz]

Short description of the problem:

When I have an ion-list with a header, if I want to add a button to the right side of the screen using item-right, it doesn't work as expected.

What behavior are you expecting?

I would like it to position the item on the the right the same as ion-item item-right positioning does

<ion item>
   <ion-item-group *ngFor="myItem of items">
      <ion-list-header>
           {{myItem.title}}
           <button item-right clear primary
            <ion-icon class="item-right-larger-button" name="checkmark-circle"></ion-icon>
       </button>
      </ion-list-header>
      <ion-item>blah blah blah</ion-item>
    <ion-item-group>
</ion-item>

Ionic Version: 1.x / 2.x

2.x

Browser & Operating System: iOS / Android / Chrome

Chrome, iOS, Android

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.2.1 Build version 7C1002

[keithdmoore]

👍 I think this is a fairly common usecase. For example, you have an item divider where you want to place an "add" or "add-circle" icon.

[brandyscarney]

This has been added and will be possible with beta 10. For example:

<ion-item-divider>
  Item Divider
  <button item-right>button</button>
</ion-item-divider>

<ion-item-divider dark>
  <button item-left clear>
    <ion-icon name="cloudy"></ion-icon>
  </button>
  <button item-left clear light>
    <ion-icon name="rainy"></ion-icon>
  </button>
  Dark
</ion-item-divider>

<ion-list-header>
  <button item-left (click)="testClick($event)">Default</button>
  Inner Buttons
  <button outline item-right (click)="testClick($event)">Outline</button>
</ion-list-header>

<ion-list-header>
  <button item-left (click)="testClick($event)">
    <ion-icon name="home"></ion-icon>
    Left Icon
  </button>
  disabled left icon buttons
  <button outline item-right (click)="testClick($event)">
    <ion-icon name="star"></ion-icon>
    Left Icon
  </button>
</ion-list-header>

Thanks!