mat-form-field always show under other elements in Angular Material

1
votes

im struggling very much with the implementation of materials mat-form-field inside a mat-card. I've created a complete new solution to demonstrate my problem. For example, i'm trying to add two mat-cards. One above the other. The first card has a mat-form-field inside and the other a image for example. That works fine. But when i click on the mat-form-field, the selection options are shown at the bottom of the page in full size. Here is the simplest implementation. tested on firefox and 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>

I've tried different things like: css styling, fxLayout="column", fxFill, put the i div containers and so on. And yes my BrowserAnimationsModule is loaded. They are also no errors.

The selection overflow of materials mat-form-field

1
angularangular-materialangular-flex-layout
set width and height to the the image tag – Aravind
i tried that as well, but it's not helping, the "Option" is always at the bottom and in full width! – Tomislav Erić

1 Answers

3
votes

Alright, i've found the solution! You have to add a prebuild-theme into your styles.css file!

I've added this code to my global styles.css

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