Transferring Ionic2 Components Inside a Custom Component

Question

Short description:

I work with <ion-item-option></ion-item-option> .

When I create a component according to the ionic2 documentation, it works fine.

But I want to wrap the ionic component in my custom component with additional functions, because in my current project the same component is used everywhere. so create it for me.

The only problem is the iOS device. ios screenshots

Example: I create a 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 on an Android device, but not on ios.

I am using a custom component as follows:

 <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 problem before, try adding height inside the style tag. he 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>