CODEWITHSUNDEEP
htmlcssflexboxangular-material
user2599849
user2599849

Reputation:

angular-material simple card title not sizing correctly in chrome

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:

enter image description here

The correct result should look like (shown in firefox developer edition):

enter image description here

Or something like on the demo page (which also works in chrome):

enter image description here

Some things i've noticed:

Does anyone have any ideas why this is happening?

Upvotes: 3

Views: 1105

Answers (2)

Augie Gardner
Augie Gardner

Reputation: 2775

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

Upvotes: 1

noypi
noypi

Reputation: 991

try: changing 16px to 30px

md-card md-card-title {
    padding: 24px 16px 30px;
}

Upvotes: -1

Related Questions