mat-form-field始终显示在Angular Material中的其他元素下

Question

我非常努力在mat-card中实现材料mat-form-field。我已经创建了一个全新的解决方案来展示我的问题。例如，我试图添加两张垫卡。一个在另一个之上。第一张卡片内部有一个mat-form-field，另一张卡片就是一个图像。这很好。但是当我点击mat-form-field时，选择选项会以完整大小显示在页面底部。这是最简单的实现。在firefox和chrome上测试过。

<div fxFlex=25%>
<mat-card>
  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option </mat-option>
    </mat-select>
  </mat-form-field>
</mat-card>
<mat-card>
  <img mat-card-image src="http://images.all-free-download.com/images/graphiclarge/harry_potter_icon_6825007.jpg">
</mat-card>
</div>

我尝试过不同的事情： css样式，fxLayout =＆＃34;列＆＃34;，fxFill，放入i div容器等等。是的，我的BrowserAnimationsModule已加载。它们也没有错误。

Answer 1

好的，我找到了解决方案！您必须在styles.css文件中添加prebuild-theme！

我已将此代码添加到我的全局styles.css

中

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";