2016-04-01 29 views
0

我在angular-md上很新,並試圖做出明顯的事情 - sidenav卡右側。代碼並不難http://codepen.io/anon/pen/qZPRmqangular-md md-grid-list隱藏在md-sidenav下

<body ng-app="BlankApp" ng-cloak layout="column"> 
<div flex layout="row"> 
    <md-sidenav md-is-locked-open="true" class="md-sidenav-left md-whiteframe-z2" layout="column"> 
     Some form here 
    </md-sidenav> 

    <!-- Container #4 --> 
    <md-content flex layout="column" class="md-padding" layout-padding> 
     <md-grid-list flex md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" 
         md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px"> 
      <md-grid-tile flex> 
       <md-card> 
        First card here 
       </md-card> 
       <md-card> 
        Second card here 
       </md-card> 
      </md-grid-tile> 
     </md-grid-list> 
    </md-content> 
</div> 

但問題是,MD-電網瓷磚從MD-內容塊跑開得到的由sidenav重疊(有時由MD-工具欄)。我做錯了什麼? Problematic layout

回答

1

變化

 <md-grid-tile flex> 
      <md-card> 
       First card here 
      </md-card> 
      <md-card> 
       Second card here 
      </md-card> 
     </md-grid-tile> 

 <md-grid-tile> 
      <md-card> 
       First card here 
      </md-card> 
     </md-grid-tile> 
     <md-grid-tile> 
      <md-card> 
       Second card here 
      </md-card> 
     </md-grid-tile>