AngularJS素材md-list高さはクロムが全く異なっています

私はAngularJSを使い始めたばかりで、Angular Materialsを使っています。私は理解できない問題に遭遇しました。AngularJS素材md-list高さはクロムが全く異なっています

md-listを書くと、FirefoxとIE（11）ではうまく描画されますが、chromeでは各md-list-itemはウィンドウの高さをとりますが、コードを実行しているときだけです私のサイトのために。

他のページ（角度材料のデモなど）を表示したり、codepenやjsfiddleのような共有可能なエディタにコードを置くと、それらはうまく表示されます。失敗したレイアウトのhttp://codepen.io/anon/pen/pyqKZr

ライブデモ：http://angular.deathwishgame.co.uk/

私自身をレンダリングするとき、なぜこれが唯一起こるん

以下のコードは、間違って

<html lang="en" > 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <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" ng-cloak> 
    <div style="height:400px;width:500px;"> 
     <md-list> 
     <md-list-item ng-click="null">Item 1</md-list-item> 
     </md-list> 
     <md-list> 
     <md-list-item ng-click="null">Item 2</md-list-item> 
     </md-list> 
     <md-list> 
     <md-list-item ng-click="null">Item 3</md-list-item> 
     </md-list> 
    </div> 


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

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

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

</body> 
</html>

CodePenを表示するテストテンプレートですページだけでは、何が間違っているのですか？

出典

2016-05-05 Richard Kille

あなたが唯一の回避策https://github.com/angular/material/issues/8094 に実行されているが、リスト項目に高さ/最大高さを与えることです。

プルリクエストが審査待ちのようです。

出典

2016-05-09 12:39:10 kuhnroyal

素晴らしい！ 'md-list-item'に高さコントロールを追加すると、高さをコントロールするサブクラスが扱いになりました。どうもありがとうございました。私は次のRCを楽しみにしています。 Unforunately、私はmd-colorsディレクティブを利用していますので、rc1に戻すことはできません。 –

この問題は現在RC.5で解決されています –

md-list-itemをすべて1つに入れることができますmd-list。

<div style="height:400px;width:500px;"> 
     <md-list> 
     <md-list-item ng-click="null">Item 1</md-list-item> 
     <md-list-item ng-click="null">Item 2</md-list-item> 
     <md-list-item ng-click="null">Item 3</md-list-item> 
     </md-list> 
</div>

出典

2016-05-05 16:29:51

グッド残念ながら呼び出し、全く影響を主催している、あなたのコードを修正しました。私はデモサイトのコードを更新しましたが、それと同じスタイリングの問題です。 –

1.1.0の代わりに角度材料バージョン1.0.9を使用します。その後、正常に動作します。

は、このコードを実行してみてください、私はあなたが

<html lang="en" > 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Angular Material style sheet --> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css"> 
</head> 
<body ng-app="BlankApp" ng-cloak> 
    <!-- 
    Your HTML content here 
    --> 
    <div style="height:400px;width:500px;"> 
     <md-list> 
     <md-list-item ng-click="null">Item 1</md-list-item> 
     <md-list-item ng-click="null">Item 2</md-list-item> 
     <md-list-item ng-click="null">Item 3</md-list-item> 
     </md-list> 
    </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.0.9/angular-material.min.js"></script> 

    <!-- Your application bootstrap --> 
    <script type="text/javascript">  
    /** 
    * You must include the dependency on 'ngMaterial' 
    */ 
    angular.module('BlankApp', ['ngMaterial']); 
    </script> 

</body> 
</html>

出典

2016-06-14 11:15:35

-1

<html lang="en" > 
    <head> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
     <script language="javascript"> 
     angular 
      .module('firstApplication', ['ngMaterial']) 
      .controller('listController', listController); 

     function listController ($scope) { 
      var self = this;    
      self.allContacts = loadContacts(); 
      self.contacts = [self.allContacts[0]]; 

      function loadContacts() { 
       var contacts = [ 
        'Roberto Karlos', 
        'Bob Crestor', 
        'Nigel Rick', 
        'Narayana Garner'     
       ]; 
       return contacts.map(function (c, index) { 
        var cParts = c.split(' '); 
        var contact = { 
         name: c, 
         email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '@example.com', 
         image: 'http://lorempixel.com/50/50/people?' + index 
        }; 
        contact._lowername = contact.name.toLowerCase(); 
        return contact; 
       }); 
      } 
     }     
     </script>  
    </head> 
    <body ng-app="firstApplication"> 
     <div id="listContainer" ng-controller="listController as ctrl" layout="column" ng-cloak> 
     <md-content> 
      <md-list> 
       <md-subheader class="md-no-sticky">Contacts</md-subheader> 
       <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts" 
        ng-if="ctrl.contacts.indexOf(contact) < 0"> 
        <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" /> 
        <div class="md-list-item-text compact"> 
        <h3>{{contact.name}}</h3> 
        <p>{{contact.email}}</p> 
        </div> 
        <md-divider ng-if="!$last"></md-divider> 
       </md-list-item> 
      </md-list> 
      <md-list> 
       <md-subheader class="md-no-sticky">Contacts (With Insets)</md-subheader> 
       <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts" 
        ng-if="ctrl.contacts.indexOf(contact) < 0"> 
        <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" /> 
        <div class="md-list-item-text compact"> 
        <h3>{{contact.name}}</h3> 
        <p>{{contact.email}}</p> 
        </div> 
        <md-divider md-inset ng-if="!$last"></md-divider> 
       </md-list-item> 
      </md-list> 
     </md-content> 
     </div> 
    </body> 
</html>

出典

2016-07-13 21:28:19 Ankit

この回答は問題を説明するか、または明らかにします。コピー＆ペーストコードはこの特定の問題を解決するかもしれませんが、他のユーザーにとっては価値が限られています。問題や解決策が何であると思いますか、それをどのように解決するべきかを説明することで、この回答を拡大してください。 –

AngularJS素材md-list高さはクロムが全く異なっています

答えて

関連する問題