当内容不同时,如何使卡片标题高度相同

时间:2018-01-05 15:42:32

标签: angularjs angular-material

我之前遇到过这种情况,只是强迫它与一堆自定义css一起使用,但这似乎很草率。这似乎完全倒退到我期望它如何工作。内容应该弯曲以匹配高度,而不是标题。除了自定义CSS之外,有关如何修复此问题的任何想法?是否有"角材料"修复它的方法?

<div layout-gt-sm="row" flex="1">
<md-card ng-show="!trackingStored.loading" flex="20">
    <md-card-title>
        <md-card-title-text layout-align="center center">
            <span class="md-headline"> General </span>
        </md-card-title-text>
    </md-card-title>

    <md-divider style="width:100%;"></md-divider>

    <md-card-content layout="column" layout-align="center center" flex = "1">

        <dl>
            <dt ng-show="trackingStored.VehicleStatus">Status</dt>
            <dd ng-show="trackingStored.VehicleStatus">{{trackingStored.trackingInfo.VehicleStatus}}</dd>


            <dt>Location</dt>
            <dd>{{trackingStored.trackingInfo.ConfirmationNumber}}</dd>

            <dt>Year</dt>
            <dd>{{trackingStored.trackingInfo.VehicleYear}}</dd>


            <dt>Make</dt>
            <dd>{{trackingStored.trackingInfo.VehicleMake}}</dd>

            <dt>Model</dt>
            <dd>{{trackingStored.trackingInfo.VehicleModel}}</dd>

            <dt>VIN</dt>
            <dd>{{trackingStored.trackingInfo.VehicleVIN}}</dd>


            <dt ng-show="trackingStored.trackingInfo.DropOffDate.HasValue">Dropped off</dt>
            <dd ng-show="trackingStored.trackingInfo.DropOffDate.HasValue">{{trackingStored.trackingInfo.DropOffDate.Value}}</dd>

        </dl>
    </md-card-content>
</md-card>

<md-card ng-show="trackingStored.trackingInfo.RecentHistory != null && trackingStored.trackingInfo.RecentHistory.length > 0"
    flex="80">

    <md-card-title >
        <md-card-title-text layout-align="center center">
            <span class="md-headline"> Maintenance History </span>
        </md-card-title-text>
    </md-card-title>

    <md-divider style="width:100%;"></md-divider>


    <md-card-content>


        <h4>(12 most recent entries)</h4>
        <div layout-gt-xs="row" layout-wrap layout-align="space-between center">


            <div ng-repeat="item in trackingStored.trackingInfo.RecentHistory track by $index" flex="50" flex-xs="100" style="width:100%;">
                <md-card>
                    <md-card-title class="customCardHeader">
                        <md-card-title-text>
                            <span class="md-headline customCardHeaderText"> {{item.CompletedDate | date: trackingStored.dateFormat}} </span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-divider> </md-divider>

                    <md-card-content>

                        <div>{{item.Comments}}</div>
                    </md-card-content>
                </md-card>

            </div>

        </div>
    </md-card-content>
</md-card>

enter image description here

0 个答案:

没有答案