Weird padding in form

Ionic Framework
1

Hi,

I’m making a super simple form with a text input and 2 buttons, using ion-item as rows. First row has the ion-input and the second row has 2 ion-buttons. As you can see from the screenshot, the second row has a weird padding and I don’t understand why.

Is there any reference for form’s markup?

Screenshot 2020-03-02 at 15.17.35
Screenshot 2020-03-02 at 15.17.35828×614 23.7 KB 

<ion-content>
  <ion-item>
    <ion-label position="stacked">New course name:</ion-label>
    <ion-input required [(ngModel)]="name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-button [routerLink]="['/courses']" size="default" color="light">Cancel</ion-button>
    <ion-button (click)="save()" size="default" color="primary">Save</ion-button>
  </ion-item>
</ion-content>
2

It doesn’t have anything to do with forms. See ion-item’s properties, especially the “lines” one. You can choose “full” (the top item) or “inset” (the bottom one) as you desire. I believe the default hinges on whether there is an interactive input in the item or not (yes on the top one, no on the bottom one).