0
私はチュートリアル "https://github.com/angular/material-start/tree/master"を作成しようとしていますが、md-listおよびmd-list-itemディレクティブに問題があります。私はコードを一番下に掲載しました。私が持っている問題は、md-list-itemsの間のスペースがサイトの高さと同じくらい大きいことです。それがなぜ起こるのか、私がここで間違っているのか、誰にもわかっていますか？角材md-item-list css bug
おかげ パット
<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>
PS：コードランナーはここで動作します。私はGoogle Chrome v52とSafariに問題があります。 FFで、そのうまく動作します。 – Patrick
ランナーのコードはまったく同じですか？ md-list-itemを継承する可能性のある他のCSSがページにありますか？ –
はい、まったく同じコードです。ランナーのコードを単純なindex.htmlにコピーして貼り付けて、スクリーンショットのように見えるクロムサファリで開きます。 – Patrick