Cannot split mat-card into two columns

Viewed 2232

I am trying to split a <mat-card> I have into two columns like so: enter image description here

An image on the left taking up maybe 25% of the card, and a header + 2 expansion panels on the right in a column. No matter what I try, there is always a single column so it looks like this:

img h1 expansion panel expansion panel

Which is fine on small screens, but for bigger screens I want it like the image above. I also notice the image does not resize regardless if I add a style to it and change it.

Here's the HTML:

<div fxLayout="row wrap" fxLayoutAlign="center center">
  <mat-card *ngFor="let pet of pets">
    <mat-card-content>
      <div fxLayout="row">
        <div fxFlex="25%">
          <img src="{{ pet.imagePath }}" />
        </div>
        <div fxFlex="75%">
          <h1>{{ pet.name }}</h1>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              Favorite Foods!
            </mat-expansion-panel-header>
          </mat-expansion-panel>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              Bad ingredients!
            </mat-expansion-panel-header>
          </mat-expansion-panel>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>

My understanding about the above is

  • the mat cards are wrapped in a div using row wrap, which means the mat cards will appear in a row and wrap to a new row at the end
  • Inside of mat-card-content, I have a div using row for fxLayout, which means each child element should be side by side. Because I split the img into one div, and the h1/expansion panels into another, these two divs should be side by side in a row correct?
  • Because I set the first div to 25%, it should take up 25% of the width of the row, while the second div should take up 75%.

What do I have wrong here?

Edit: Here's an example of a mat card I saw from another post here that is similar to what I'm trying to achieve. Unfortunately, the solution did not work for me: How to set mat-card-image height to 100%?

enter image description here

UPDATE: I'm dumb. I did not install the flex-layout module. In case anyone is wondering why their fxlayout stuff is not working, make sure you have it installed and added in your imports!

0 Answers
Related