Align button in form

Ionic Framework ionic-v3
1

How can I align my submit button with inputs? Left side is larger than the inputs:

print-ionic
print-ionic.png313×557 8.17 KB 

<ion-content padding>

  <form (ngSubmit)="send()">
    <ion-item>
      <ion-label color="primary" floating>Assunto</ion-label>
      <ion-input type="text" name="subject" [(ngModel)]="todo.subject"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary" floating>Descreva o problema</ion-label>
      <ion-textarea #description id="description" rows="1" (keyup)="resize()" 
      name="message" [(ngModel)]="todo.message"></ion-textarea>
    </ion-item>
    <ion-label></ion-label>
    <button ion-button type="submit" block>Enviar</button>
  </form>

</ion-content>
2

When trying to adjust an Ionic element, you should always look to see if there is a SASS variable that exists that you can override with your custom values. You can query this list at: https://ionicframework.com/docs/theming/overriding-ionic-variables/

For this issue, you can add the following variables in your variables.scss file:
$item-ios-padding-left: 0;
$item-md-padding-left: 0;

This will remove the padding from the left of the ion-items. It is that content that is being shifted over, causing the visual misalignment.

If you are wondering, how did I know it was the ion-item and not the ion-label or ion-input? Remember, our app is running in a browser, by using Chrome’s Dev Tools, I can quickly inspect the DOM elements and see what padding and margins are being applied.

Hope this helps you and any further styling you need to do for your app.

3

Thanks man! It got better.:+1::+1:
Problem now is that it removes other items like side menu list items.

Applying “no-padding” to items seems to be a better approach.