MD-LIST Constante Hauteur

Question

Je souhaite implémenter une discussion simple en utilisant md-list comme modèle pour cela. Le problème est que lorsque j'ajoute de nouveaux éléments à md-list (en poussant de nouveaux messages), la liste md est en croissance.

Je veux avoir un comportement de ma liste similaire à d'autres chats, donc la hauteur de la causerie est constante, indépendante des éléments et le chat est défilable en Y, les utilisateurs peuvent ainsi défiler les messages plus anciens.

J'alread mis ceci:

md-list{ 
    overflow-y: scroll; 
} 

et mis le conteneur de chat pour une valeur maximale de la hauteur, mais la liste est en croissance, et sortir de la taille des parents. Donc, le parent est sur la taille init 400px, discuter aussi. Quand j'ajoute des messages, le parent a toujours 400px de hauteur, mais le chat est en train de grandir + = message.height.

Comment le réparer? J'essaie d'ajouter max-height de la même manière que la hauteur initiale du chat, mais cela ne fonctionne pas.

Des idées?

Answer 1

Ajouter une classe avec une hauteur fixe à md-list.

 <md-list class="fix-height">   
     <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader> 
     <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null"> 
      <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}"> 
      <div class="md-list-item-text" layout="column"> 
      <h3>{{ item.who }}</h3> 
      <h4>{{ item.what }}</h4> 
      <p>{{ item.notes }}</p> 
      </div> 
     </md-list-item> 
     </md-list> 

CSS

.fix-height{ 
    max-height:200px; 
    height:200px; 
} 

codepen here