[英]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. 我正在尝试使它,以便我的md卡网格根据其图像具有不同的高度。 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? 如何使
<md-card>
的卡内容不延伸以匹配行?
Here is the html for the cards: 这是卡片的html:
<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: 和CSS:
md-card {
width: 375px;
border-radius: 3px;
}
.card_content {
padding-left: 10px;
height: 100%;
}
What you have is a row layout. 您所拥有的是行布局。 You append each
md-card
to the same row. 您将每个
md-card
附加到同一行。 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. 您可以有一个
div
填充此高度,然后使用md-card
仅部分填充div。 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. 现在,每个
md-card
被添加到其兄弟姐妹下方的一列中。 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. 在这里,我们使用
ng-repeat
的$even
和$odd
将每张卡左右分开。 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. 当然,您必须找出不同的屏幕宽度需要多少列。
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. 如您所见...我正在为每组卡创建一行( layout-wrap ),然后为每张卡绘制一列( flex )。 The result, as i expected, has been an auto height behavior for each card!
正如我所期望的,结果是每张卡的自动高度行为!
Hope this helps someone! 希望这对某人有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.