AngularJS Material md-list hight ganz anders in chrom

Ich bin ziemlich neu in AngularJS und ich arbeite mit Angular Materials, und ich bin auf ein Problem gestoßen, das ich nicht verstehen kann.AngularJS Material md-list hight ganz anders in chrom

Wenn man eine md-Liste schreibt, wird sie in Firefox und IE (11) gut dargestellt, aber in chrome nimmt jedes md-list-Objekt die volle Höhe des Fensters an, aber nur wenn ich den Code ausführe für meine Seite.

Wenn ich andere Seiten (zB die Angular-Material-Demos) anschaue oder den Code in einen gemeinsam nutzbaren Editor, wie Codepen oder Jsfiddle, lege, rendern sie gut.

Der folgende Code ist eine Testvorlage, die

<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 falsch anzeigt: http://codepen.io/anon/pen/pyqKZr

Live-Demo des ausgefallenen Layout: http://angular.deathwishgame.co.uk/

Warum dies nur geschehen, wenn meine eigene Rendering Seite allein, was mache ich falsch?

Quelle

2016-05-05 Richard Kille

Sie führen in https://github.com/angular/material/issues/8094 Die einzige Lösung ist die Listenelemente eine Höhe/Max-Höhe zu geben.

Es scheint eine Pull-Anfrage ausstehende Überprüfung zu sein.

Quelle

2016-05-09 12:39:10 kuhnroyal

Fantastisch! Das Hinzufügen von Höhensteuerelementen zu "md-list-item" und den Unterklassen, die die Höhe steuern, hat sich bewährt. Vielen Dank. Ich freue mich auf den nächsten RC. Leider benutze ich die md-colors Direktive, daher kann ich nicht auf rc1 zurückgreifen. –

Dieses Problem wurde jetzt in RC.5 behoben. –

Sie können versuchen, alle md-list-item in nur einem md-list zu setzen.

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

Quelle

2016-05-05 16:29:51

Guten Ruf, leider haben gehostet korrigiert, keine Wirkung. Ich habe den Code auf der Demo-Site aktualisiert, immer noch das gleiche Styling-Problem. –

Verwenden Sie die Winkelmaterialversion 1.0.9 anstelle von 1.1.0. Dann wird es gut funktionieren.

Try diesen Code ausgeführt wird, habe ich Ihren Code, den Sie

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

Quelle

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>

Quelle

2016-07-13 21:28:19 Ankit

Diese Antwort erklärt oder beleuchtet das Problem. Copy-and-Paste-Code kann dieses spezielle Problem lösen, hat aber für andere Benutzer nur begrenzten Wert. Bitte erweitern Sie diese Antwort, indem Sie beschreiben, was Sie für das Problem oder die Lösung halten und wie Sie es vorschlagen. –

AngularJS Material md-list hight ganz anders in chrom

Antwort

Verwandte Themen