How to change the size of mat-card in angular material

user_11211493 0
Viewed 9440

Screenshot

I want both Components the same height (the size of left form) tried margin , padding nothing works

below is the code for its parent element HTML

<mat-tab label="Update Profile">

    <div class="container">
      <mat-card class="mat-card-container">
      <div class="vertical-center row" >

        <div class="col-lg-1">
        </div>

        <div class="col-lg-6">
          <app-register [user]="user"></app-register>
        </div>

        <div class="col-lg-4 password-change-form">
          <app-password-change [id]="user.id"></app-password-change>
        </div>



        <div class="col-lg-1">
        </div>

      </div>
      </mat-card>
    </div>
  </mat-tab>

CSS

.vertical-center {
  margin-top: 2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.password-change-form{
  padding: inherit;
}
.spacer{}
bootstrap-4 angular-material angular grid css
2 Answers

Better you can use flex layout. Refer: [https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API][1]

Set fxFlexAlign="stretch" to have all mat-card in same height.

user_95996410

The problem is not with the mat card, but with the div with password-change-form if you were asking to make them the same height:

.password-change-form{
   height:100%
}

but if you want them to have the same width, you should probably add col-lg-5 to both of them instead of 6 and 4

    <div class="col-lg-5">
      <app-register [user]="user"></app-register>
    </div>

    <div class="col-lg-5 password-change-form">
      <app-password-change [id]="user.id"></app-password-change>
    </div>
user_65124450
Related