Угловой материал md-item-list css bug

0

Я пытаюсь сделать учебник " https://github.com/angular/material-start/tree/master ", но у меня проблема с директивой md-list и md-list-item. Я отправил свой код внизу. Проблема заключается в том, что пространство между элементами md-list до такого размера, как высота сайта. есть кто-нибудь, почему это происходит или что я делаю неправильно здесь?

Спасибо Pat

Скриншот

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
  Your HTML content here
-->

<!-- Wireframe Container #1 -->
<div flex layout="row">

    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <!-- List item #1 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
                    Lia Luogo
                </md-button>
            </md-list-item>

            <!-- List item #2 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
                    Lawrence Ray
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex id="content">
        <!-- User details sample -->
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        <h2>Lia Luogo</h2>
        <p>
            I love cheese...
        </p>
    </md-content>

</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    var app = angular.module('BlankApp', ['ngMaterial']);
    app.controller('MyController', function ($scope, $mdSidenav) {
        $scope.openLeftMenu = function () {
            $mdSidenav('left').toggle();
        };
    });
</script>

</body>
</html>
  • 0
    PS: в коде бегун здесь работает нормально. У меня проблема с Google Chrome v52 и Safari. В ФФ работает нормально.
  • 0
    Это точно такой же код в бегун? Есть ли у вас другие css на странице, которые могут наследоваться от md-list-items?
Показать ещё 2 комментария
Теги:
angular-material
material

1 ответ

0
Лучший ответ

Я обновил загруженные файлы, чтобы они соответствовали тем демонстрационным файлам с угловым материалом, и проблема больше не существует.

Если кому-то интересно, как реплицировать проблему, скопируйте разметку в вопрос в файл (test.html) и откройте файл в Chrome. Надпись будет отображаться правильно.

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
  Your HTML content here
-->

<!-- Wireframe Container #1 -->
<div flex layout="row">

    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <!-- List item #1 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
                    Lia Luogo
                </md-button>
            </md-list-item>

            <!-- List item #2 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
                    Lawrence Ray
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex id="content">
        <!-- User details sample -->
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        <h2>Lia Luogo</h2>
        <p>
            I love cheese...
        </p>
    </md-content>

</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    var app = angular.module('BlankApp', ['ngMaterial']);
    app.controller('MyController', function ($scope, $mdSidenav) {
        $scope.openLeftMenu = function () {
            $mdSidenav('left').toggle();
        };
    });
</script>

</body>
</html>
Поделиться
  • 0
    Большое спасибо, так что все, что вы изменили, это угловая версия до 1.5.5 и версия md до 1.1.0-rc.5, как я вижу
  • 0
    @ Патрик - Да. Это сработало, просто изменив версию AM на 1.1.0-rc.5, но я подумал, что будет лучше обновить все. Рад помочь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню