角型材料のmd-list-item全画面の高さが時々

クリックアクションが添付されると、各リスト項目は全画面の高さになります。テキストを囲むだけの大きさにする必要があります。角型材料のmd-list-item全画面の高さが時々

以下は、ファイルとして開いたときの問題を示す最小限の問題の例です。

codepen - http://codepen.io/anon/pen/ZOaPVy - で正しく動作し、クリックアクションが削除されると正しく動作します。 Linuxのクロムブラウザで表示しています。

<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>

これは、同様の質問のより簡易版である：私はMacBookの上でChromeとSafariでこの非常に奇妙な問題を再現 Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

出典

2016-07-13 cmonkey

。 Firefoxでは表示されません。

犯人が

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

良いことがありますが <head>すべてにこれを追加した場合 md-list-item

の_md-list-item-innerの100％の高さであるように思わ

出典

2016-07-14 10:54:32

角型材料のmd-list-item全画面の高さが時々

答えて

関連する問題