ohyeah ohyeah - 5 months ago 244
AngularJS Question

Why are these cards not displaying properly?

I am using Angular Material's cards in a material grid. I have this code:

http://codepen.io/anon/pen/YWwwvZ .

The problem: the top row of images goes off screen at the top, and the bottom row partially overlaps the top row. I want all cards to not be covered by other cards, or go off screen. How do I do that? And for bonus points, how do I remove 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 in foundin the LICENSE file at http://material.angularjs.org/license.
-->




Answer

You are telling your grid-tiles to be squares

<md-grid-list ... md-row-height="2:2">

So they are forced to have the same height as width. They are not actually "overlapping" but the tiles themselves are cut off, because they are not height enough for the content they contain.

If you change it to md-row-height="2:2.5" for example, it fits. But only until you resize the browser window and the width of the tiles changes. That changes their height too.

That's how grid tiles work, they are supposed to be a grid with same height for all. So best would be to fit your content into the available height (maybe using text-overflow: ellipsis; or a Ng module that automatically calculates the text length based on available space).

Comments