Ionic2 component wrap inside a custom component

Question

Short Description:

I am working with <ion-item-option></ion-item-option>.

When i create component as per ionic2 documentation it works fine.

But i want to wrap ionic component into my custom component with additional features because in my current project same component used everywhere. so its create issue for me.

Problem in IOS device only. ios screenshots

Ex: I create new component <nl-edit-button></nl-edit-button>

   @Component({
      selector: 'nl-edit-button',
      template: `
        <button ion-button color="edit" (click)="openEditModal(complaint)" *ngIf="complaint.statusId != 6 && complaint.statusId != 4">
          <ion-icon name="md-create"></ion-icon>
          Edit
        </button>
      `
    })

It works as expected in android device but not in ios.

I am using custom component like this:

<ion-item-options side="right">
  <nl-edit-button [complaint]="complaint" (edit)="openEditModal($event)">    </nl-edit-button>
</ion-item-options>

Answer 1

i had the same issue earlier, try to add height inside an style tag. it works for me.

@Component({
      selector: 'nl-edit-button',
      template: `
        <div style="height:100%">
        <button ion-button color="edit" (click)="openEditModal(complaint)" *ngIf="complaint.statusId != 6 && complaint.statusId != 4">
          <ion-icon name="md-create"></ion-icon>
          Edit
        </button>
        </div>
      `
    })


    <ion-item-options side="right">
      <nl-edit-button style="height:100%" [complaint]="complaint" (edit)="openEditModal($event)">    </nl-edit-button>
    </ion-item-options>