如何更改角材料中垫卡的大小

Posted 2023-03-06

【中文标题】如何更改角材料中垫卡的大小

【英文标题】：How to change the size of mat-card in angular material

【发布时间】：2021-02-19 05:56:17

【问题描述】：

我希望两个组件具有相同的高度（左侧表单的大小）尝试使用边距，填充无效

下面是其父元素 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

【参考方案1】：

你最好使用flex layout。参考：[https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API][1]

设置fxFlexAlign="stretch" 使所有垫卡高度相同。

【讨论】：

谢谢，这对我有用。甚至还有一个演示，您可以在其中模拟 Angular Flex 布局的参数：tburleson-layouts-demos.firebaseapp.com/#/docs

【参考方案2】：

问题不在于 mat 卡，而在于带有密码更改形式的 div，如果您要求使它们具有相同的高度：

.password-change-form
   height:100%

但如果您希望它们具有相同的宽度，您可能应该将 col-lg-5 添加到它们而不是 6 和 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>

【讨论】：

相同高度，您的解决方案不起作用，但谢谢

是app-password-change组件里面的mat卡吗？

如果是，试试这个把它放在组件mat-card width: calc(100% - 70px); height: calc(100% - 70px); 的css文件中