Left padding missing

[scaledapps]

I followed all the steps in the tutorial.

Left padding seems to be missing for all components. What did I miss?

[fredinfu]

Same, no solution?

[tanya-sonker]

I think the codelab needs a few styling fixes. To fix what @scaledapps mentioned, just add the directives related to the Angular Material components.

Tasks

First make sure app.component.css has margin for "app-task" and not "app-new-task" set to 20px. Then update task.component.html by wrapping the card's contents with mat-card-content which adds padding to the card(s).

<mat-card class="item" *ngIf="task" (dblclick)="edit.emit(task)">
    <mat-card-content>
    <h2>{{ task.title }}</h2>
    <p> {{ task.description }}</p>
    </mat-card-content>
</mat-card>

Dialog

Since it's an Angular Material Dialog, you'd have to wrap the form fields in a div (or if it's a formGroup just add it to that) and add mat-dialog-content which would add padding and align the elements. Similarly if you add a heading to the dialog box before the content, you can add mat-dialog-title

So your task-dialog.component.html code would look something like:

<h2 mat-dialog-title>Add Task</h2>
<form mat-dialog-content [formGroup]="taskForm" (ngSubmit)="onSubmit()">
<mat-form-field>
    <mat-label>Title</mat-label>
    <input matInput formControlName="title" cdkFocusInitial [(ngModel)]="data.task.title" />
    <mat-error *ngIf="taskForm.get('title')?.invalid && taskForm.get('title')?.touched">
        Title is required.
    </mat-error>
</mat-form-field>

<mat-form-field>
    <mat-label>Description</mat-label>
    <textarea matInput formControlName="description" [(ngModel)]="data.task.description"></textarea>
    <mat-error *ngIf="taskForm.get('description')?.invalid && taskForm.get('description')?.touched">
        Description is required.
    </mat-error>
</mat-form-field>

<div mat-dialog-actions>
    <button mat-button [disabled]="!taskForm.valid" [mat-dialog-close]="{ task: data.task }">OK</button>
    <button mat-button (click)="cancel()">Cancel</button>
</div>

</form>