Menu
I'm trying to get a very simple angular material card to display with a title and some text. I've used a verbatim copy of the demo code at https://material.angularjs.org/latest/demo/card but I can't seem to get it to render correctly in chrome. If I strip down the demo code to the bare minimum, I have
<html lang="en">
<head>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>
<body ng-app="BlankApp" ng-cloak>
<md-card>
<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>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
Which gives a result that looks like this in chrome:
The correct result should look like (shown in firefox developer edition):
Or something like on the demo page (which also works in chrome):
Some things i've noticed:
<md-card-title> has a height of 0 - the content flows out of the bottom of the boxflex: 1 from the <md-card-title>Does anyone have any ideas why this is happening?
This is broken. Angular Material Version 1.1.1. Chrome version 52, and 53.
That pen works, yet copy/pasting the inner guts that pen into an empty chrome tab doesn't work, it shows the same problem above, and this is also happening on my app.
@cakez0r, add this to your CSS:
md-card-title {
flex: initial!important;
}
That'll do the trick
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
