I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with:
http://codepen.io/anon/pen/YWwwvZ
The issue at hand is that the top row of images extends off the screen at the top, and the bottom row overlaps the top row partially. My goal is to ensure that all cards are visible without any overlap and do not extend off the screen. How can I achieve this? Additionally, how can I eliminate the second scroll bar?
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope) {
$scope.imagePath = 'https://material.angularjs.org/latest/img/washedout.png';
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
<div ng-controller="AppCtrl" ng-cloak="" class="carddemoCardActionButtons" ng-app="MyApp">
<md-content layout-xs="column" layout="row">
<md-grid-list class="md-padding" flex ng-cloak md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="24px" md-gutter-gt-sm="24px">
<md-grid-tile ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11]">
<md-card>
<img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Ou">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Icon action buttons</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Settings">
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Share">
<md-icon md-svg-icon="img/icons/share-arrow.svg"></md-icon>
</md-button>
</md-card-actions>
</md-card>
</md-grid-tile>
</md-grid-list>
</md-content>
</div>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://material.angularjs.org/license.
-->