Question

附加点击操作后，每个列表项都会以全屏高度结束。它应该足够大以封闭文本。

下面是一个问题的最小示例，它显示了作为文件打开时的问题。

它在codepen中正常工作 - http://codepen.io/anon/pen/ZOaPVy - ，并且在删除点击操作时它可以正常工作。我在Linux上的Chrome浏览器中查看它。

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body>
  <md-list ng-app="BlankApp">
    <md-list-item ng-click="null">
      <p> List item 1 </p>
    </md-list-item>
    <md-list-item ng-click="null">
      <p> List item 2 </p>
    </md-list-item>
  </md-list>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>

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

  <script type="text/javascript">
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

这是类似问题的更简化版本： Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

Answer 1

我在MacBook上的Chrome和Safari中重现了这个非常奇怪的问题。它不会出现在Firefox中。

罪魁祸首似乎是_md-list-item-inner

md-list-item的100％高度

如果你将其添加到<head>，那么一切都应该是好的

<style>
  md-list-item._md-button-wrap>div.md-button:first-child ._md-list-item-inner {
    height: initial;
  }
</style>

Angular-material md-list-item全屏高度有时为

1 个答案: