Angular 2 Material form elements horizontal alignment

Question

I want to thank you ahead, for your time. I really appreciate all your help!

This is a form I created with Angular 2 Material Design. I'm wondering how can I align and ? As you can see in this snapshot below, the Bill Number is higher than Year.

Below is the code

<md-card class="bill-form">
<md-toolbar color="warn">
    <md-card-title>{{bill.Type}}</md-card-title>
</md-toolbar>
<md-card-content class="form-content">
    <form>
        <table style="width:100%" cellspacing="0">
            <tr>
            <td>
                <md-select placeholder="Vendor" [(ngModel)]="bill.VendorShortcut" name="VendorShorcut"
                (change)="getVendor(bill.VendorShortcut)">
                    <md-option>
                    </md-option>
                    <md-option *ngFor="let vendor of vendors" [value]="vendor">
                        {{vendor}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Type" [(ngModel)]="bill.Type" name="Type" selected="'Bill'">
                    <md-option [value]="'Bill'">
                        Bill
                    </md-option>
                    <md-option [value]="'Credit'">
                        Credit
                    </md-option>
                </md-select>

            </td>
            <td>
                <md-select placeholder="Month" [(ngModel)]="bill.Month" name="Month" selected="bill.Month">
                    <md-option *ngFor="let month of months" [value]="month">
                        {{month}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Year" [(ngModel)]="bill.Year" name="Year" selected="bill.Year">
                    <md-option *ngFor="let year of years" [value]="year">
                        {{year}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-input-container>
                    <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
                </md-input-container>
            </td>
            <td>
                <md-input-container align="end">
                    <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total">
                    <span md-prefix>$&nbsp;</span>
                    <span md-suffix></span>
                </md-input-container>
            </td>
            </tr>
        </table>

    </form>
</md-card-content>

score 4 · Answer 1 · edited Dec 21 '20 at 15:33

Coming to this very late, but for people using the up-to-date angular material you may want to consider ditching the tables & containers and using the angular material-grid-list.

<mat-grid-list>
    <mat-grid-tile class="form-tile">
        Date:
    </mat-grid-tile>
    <mat-grid-tile class="form-tile">
        <input matInput placeholder="Date"  [(ngModel)]="date" name="date">
    </mat-grid-tile>
</mat-grid-list>

You can specify the row height and the number of columns. The api for this control can be found here:

Grid List

If you wish further styling inside the list, check out this further S-O post:

Further style your grid

On the example above you would use class form-tile to further style your component. In my experience this gives a consistent and tidy form experience.

score 1 · Accepted Answer · answered Apr 12 '17 at 20:32

You should be using a label instead of having it in the placeholder as

    <td>
        <label class="..."> Bill Number </label>
        <md-input-container>
            <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
        </md-input-container>
    </td>

Use some bootstrap classes

score 0 · Answer 3 · answered Apr 12 '17 at 20:21

You could give the input containers a class and move them with CSS

HTML

        <td>
            <md-input-container class="align">
                <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
            </md-input-container>
        </td>
        <td>
            <md-input-container class="align" align="end">
                <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total">
                <span md-prefix>$&nbsp;</span>
                <span md-suffix></span>
            </md-input-container>
        </td>

CSS

.align {
  top: 5px;
}

score 0 · Answer 4 · answered Mar 23 '19 at 11:05

Use material list this :

<mat-list>
 <mat-list-item> <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber"> </mat-list-item>
 <mat-list-item> <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total"> </mat-list-item> 
</mat-list>

Angular 2 Material form elements horizontal alignment

4 Answers4