內容溢出卡角材

我所有的內容都溢出了卡。內容溢出卡角材

<md-content ng-controller="TestCtrl" layout-padding> 
<div layout="row" style="height: calc(100vh - 64px);"> 
<!-- left sidenav : search and search results --> 
<div layout="column" flex-gt-sm="30" style="background-color: #fafafa;"> 
    <md-content layout="column" flex class="search-results" layout-margin style="overflow: auto;"> 
    <span class="md-subhead muted">Results: </span> 
    <md-card ng-repeat="place in places" class="result-card" layout="column"> 
     <md-card-content flex> 
      <h2 class="title">{{place.first_name}} {{place.last_name}}</h2> 
      <h4 class="sub-cat">Prospect Status: <span class="state">{{place.prospect_status}}</span></h4> 
      <h4 class="sub-cat">Spiritual Condition: <span class="state">{{place.spiritual_condition}}</span></h4> 
      <h4 class="sub-cat">Street: <span class="state">{{place.address[0].street_no}}</span></h4> 
      <h4 class="sub-cat">Prospect Status: <span class="state">{{place.prospect_status}}</span></h4> 
      <h4 class="sub-cat">Spiritual Condition: <span class="state">{{place.spiritual_condition}}</span></h4> 
      <h4 class="sub-cat">Street: <span class="state">{{place.address[0].street_no}}</span></h4> 
     </md-card-content> 
    </md-card> 
</md-content> 
</div> 
</div>

這裏有一個link到plunker。

來源

2017-07-14 Amit Singh

只需使用MD-內容組件刪除layout="column"：

<md-content flex class="search-results" layout-margin style="overflow: auto;">

來源

2017-07-14 12:34:06 tiagodws

只需將layout-fill屬性添加到您的md-card：

<md-card ng-repeat="place in places" class="result-card" layout="column" layout-fill>...</md-card>

Updated Plunkr

來源

2017-07-14 12:36:24 Edric

內容溢出卡角材

回答

相關問題