Angular Material md-item-list CSS-Fehler

Ich versuche, das Tutorial "https://github.com/angular/material-start/tree/master" zu machen, aber ich habe ein Problem mit der MD-Liste und MD-List-Item-Direktive. Ich habe meinen Code unten gepostet. Das Problem, das ich habe, ist, dass der Abstand zwischen den md-list-Elementen so groß ist wie die Höhe der Site. Hat jemand eine Idee warum das passiert oder was ich hier falsch mache?Angular Material md-item-list CSS-Fehler

Dank Pat

screenshot

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

Quelle

2016-08-16 Patrick

PS: im Code Runner hier funktioniert es gut. Ich habe das Problem mit Google Chrome v52 und Safari. In FF funktioniert es gut. – Patrick

Ist es GENAU der gleiche Code im Läufer? Hast du andere CSS auf der Seite, die auf die md-list-items vererbt werden könnten? –

ja es ist genau der gleiche Code. wenn ich den code des läufers in eine einfache index.html kopiere/einfüge und ihn in chrome safari öffne, sieht es wie auf dem screenshot aus. – Patrick

ich die Dateien aktualisiert, die der scharfkantige Material Demo und das Problem nicht mehr vorhanden sind geladen entsprechen.

Wenn sich jemand fragt, wie das Problem repliziert werden soll, kopieren Sie das Markup in der Frage in eine Datei (test.html) und öffnen Sie die Datei in Chrome. Die Markierung unten wird korrekt angezeigt.

<html lang="en"> 
<head> 
    <!-- Angular Material style sheet --> 
    <link rel="stylesheet" 
      href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/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.5/angular.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 

<!-- Angular Material Library --> 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/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>

Quelle

2016-08-17 09:16:43

Vielen Dank, also alles, was Sie geändert haben, war die eckige Version zu 1.5.5 und die MD-Version zu 1.1.0-rc.5, wie ich – Patrick

@Patrick sehen kann - Ja. Es funktionierte nur die AM-Version zu 1.1.0-rc.5 zu ändern, aber ich dachte, es wäre am besten, alles zu aktualisieren. Freut mich, Ihnen behilflich zu sein. –

Angular Material md-item-list CSS-Fehler

Antwort

Verwandte Themen