3

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!

pfinferno
  • 1,779
  • 3
  • 34
  • 62
  • 1
    Not familiar with the library, but is there a way that you can add `display: flex` to either `mat-card` or `mat-card-content`? This should put the child elements side by side instead of stacking them. – Nick Kinlen May 17 '20 at 17:01
  • Just tried. It did not work, unfortunately. I tried it with the `mat-card`, `mat-card-content`, and a `div` that I put around it. – pfinferno May 17 '20 at 17:10
  • 1
    Your code is working just fine on this [Stackblitz demo](https://stackblitz.com/edit/httpsstackoverflowcomq618554066433166?file=src/app/expansion-overview-example.ts). I've added a simple gap between the cards. Other than that I did nothing more. – julianobrasil May 17 '20 at 19:45

0 Answers0