CODEWITHSUNDEEP
cssangularflexboxangular-material
Art McAhon
Art McAhon

Reputation: 21

how to create columns in angular material card?

How do we divide an angular mat card grid in parts ? Anyone has an idea here ?. I wanted to create a division same with the image below , I have provided my sample code below with the mat card and inputs.Thank you.

Already tried lot of stuff but cant seem to figure it out.

[This is the division that I want][1]

Code

<div><hr style="width:38%;margin-top:50px;background-color:#E5E5E5;"></div>
        <mat-card class="custom">
            <mat-card-content>
                <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
                    <div fxFlex="45%">
                        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                            <mat-label>Firstname</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                    <div fxFlex="45%">
                        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                            <mat-label>Lastname</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                </div>
            </mat-card-content>
            <mat-card-content>
                <div fxLayout="row" fxFlex="100">
                    <div fxFlex="45%">
                        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                            <mat-label>Firstname</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                </div>
            </mat-card-content>
        </mat-card>

Upvotes: 1

Views: 4205

Answers (1)

lbsn
lbsn

Reputation: 2412

Here's a tentative, not sure if it's exactly what you want:

<mat-card class="custom" style="width: 500px">
    <mat-card-content>
        <div fxLayout="row" fxLayoutAlign="space-between">
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Firstname</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Lastname</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="start">
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Phone Number</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between">
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Company Name</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
            <div fxLayout="column" fxFlex="0 0 47%">
                <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                    <mat-label>Title</mat-label>
                    <input matInput>
                </mat-form-field>
            </div>
        </div>
    </mat-card-content>
</mat-card>

https://stackblitz.com/edit/angular-nqxgkw

Upvotes: 1

Related Questions