CODEWITHSUNDEEP
angularjsangular-material
Kiwi
Kiwi

Reputation: 2773

Angular Material md-card-title-text has height of 0

I'm trying to figure out why my md-card-title-text Doesn't render right, I don't have any extra css on it, just default angular-material

I'm using te following code to show it:

<md-card>
    <md-card-header>
        <md-card-avatar>
            <img class="md-user-avatar" src="https://material.angularjs.org/HEAD/img/100-2.jpeg" />
        </md-card-avatar>
        <md-card-header-text>
            <span class="md-title">User</span>
            <span class="md-subhead">subhead</span>
        </md-card-header-text>
    </md-card-header>
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline">In-card mixed actions</span>
            <span class="md-subhead">Reversed</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="start center">
        <md-button>Action 1</md-button>
        <md-button>Action 2</md-button>
        <md-card-icon-actions>
            <md-button class="md-icon-button" aria-label="toggle">
                <md-icon md-svg-icon="md-toggle-arrow"></md-icon>
            </md-button>
        </md-card-icon-actions>
    </md-card-actions>    
</md-card>

here is a screenshot showing the issue:

Screenshot

Upvotes: 3

Views: 1587

Answers (1)

Benjamin Gaunitz
Benjamin Gaunitz

Reputation: 71

I had the same error and could not reproduce it within Codepen or anywhere else. After a while of trying I figured out I forgot adding <!DOCTYPE html> to the html file, which solved the problem.

Best Regards,
Benjamin

Upvotes: 6

Related Questions