小编Ale*_*x03的帖子

具有可滚动内容的角度材料md卡

我有一个md卡,由md-header和可滚动的md-card-content组成.随着可滚动内容越来越高,标题由于某种原因变得越来越小.卡的宽度可以改变,并且标题可能会缠绕到2或3行,因此标题上的最小高度不是解决方案.最新的IE和Chrome存在问题,而不是FF.

单击"添加5行"按钮几次以查看标题缩小

http://plnkr.co/edit/wgBKnXh7FSn1VLO8mST0?p=preview

<html>
    <head>
        <title>angular material</title>
        <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
    </head>
    <body ng-app="app" ng-controller="ctrl" layout="column" layout-fill>
        <md-card style="height: 200px; width: 500px">
            <md-card-header style="border-bottom: 1px solid grey">
                <md-card-header-text>
                    <span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
                </md-card-header-text>
            </md-card-header>
            <md-content-card style="overflow-y: auto" >
                <ul>
                    <li ng-repeat="x in getArray() track by $index"></li>
                </ul>

            </md-content-card>
        </md-card>
        <button style="width: 200px" ng-click="addRows()">
            Add 5 Rows
        </button>
        <!-- Angular Material Dependencies -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
        <script …
Run Code Online (Sandbox Code Playgroud)

html css angular-material

2
推荐指数
1
解决办法
8598
查看次数

标签 统计

angular-material ×1

css ×1

html ×1