angular-material md-card dynamic height

问题:

I am trying to make it so my grid of md-cards have different heights depending on their image. Right now if one image is taller the entire row of cards match that height, making for a wonky look. What can I do to make the card content inside the <md-card> not stretch to match the row?

Here is the html for the cards:

   <section class="cards" ng-if="view === 'Articles'">
        <div layout="row" layout-align="center stretch" layout-wrap>
          <md-card ng-repeat="article in home.articles | filter:searchCard | orderBy:'-negPos'">
            <a ng-href="/article/{{article.id}}"><img ng-src="{{article.imagePath}}" class="card-image" alt="Article image"></a>
            <div class="card_content">
                <div class="article_card_title">
                    <a ng-href="/article/{{article.id}}"><h3 class="md-subhead">{{article.title}}</h3></a>
                </div>
                <div class="card_agency">
                    <span class="agency_name">{{article.agency}}</span>
                </div>
            </div>
            <div class="card_ratings">
                <div>
                <img src="{{article.negPosBar}}">
                    <md-tooltip md-direction="'bottom'">
               </div>
               <div>
                <img src="{{article.skewBar}}">         
               </div>
              <div>
                <img src="{{article.contBar}}">
               </div>
            </div>
          </md-card>
          <h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0">No results!</h1>
        </div>
    </section>

And the css:

md-card {
    width: 375px;
    border-radius: 3px;
}

.card_content {
    padding-left: 10px;
    height: 100%;
}

回答1:

What you have is a row layout. You append each md-card to the same row. This means the row is gonna grow in height according to its tallest child, and other children stretch to match this height. You could have a div filling this height, and then the md-card to fill the div only partially. But this would mean there is still empty space between the cards on the first and the second row.

The other approach is to make a column layout. According to your picture you would have three columns. Now each md-card is appended to one of the columns, below its sibling. Take a look at this two column layout:

<div layout="row">
  <div layout="column" flex="50" class="left">
    <md-card ng-repeat="article in home.articles" ng-if="$even">
    </md-card>
  </div>
  <div layout="column" flex="50" class="right">
    <md-card ng-repeat="article in home.articles" ng-if="$odd">
    </md-card>
  </div>
</div>

Here we use the $even and $odd from ng-repeat to split each card to left and right. Making the order look like this:

1 2
3 4
5 6

Of course you would have to figure out how many columns you need with different screen widths.

回答2:

I have dealing with that too! So, what i did about it was create the following structure:

<div layout="row" ng-repeat="itemGroup in itemCollection" layout-wrap>
    <div layout="column"  ng-repeat="item in itemGroup" flex>
        <md-card>
             <!-- card content here... -->
        </md-card>  
    </ng-include> 
</div>

As you can see...i'm creating a row (layout-wrap) for each group of cards and then i'm just drawing a column (flex) for every card. The result, as i expected, has been an auto height behavior for each card!

Hope this helps someone!