MD-LIST 상수 높이

Question

md-list를 사용하여 간단한 채팅을 템플릿으로 구현하고 싶습니다. 문제는 md-list에 새 항목을 추가 할 때 (새 메시지를 푸는 경우) md-list가 커지는 경우입니다.

다른 채팅과 비슷한 채팅 목록을 사용하고 싶기 때문에 채팅의 높이가 일정하며 항목 수에 관계없이 채팅이 Y로 스크롤되므로 사용자는 스크롤로 이전 메시지를 볼 수 있습니다.

md-list{ 
    overflow-y: scroll; 
} 

을 그리고 어떤 최대 높이 값으로 채팅의 컨테이너를 설정할 수 있지만 목록 성장, 부모 크기의 외출 :

나는이 설정을 벌써.

부모님이 400px 높이에서 초기화되었으므로 채팅도 있습니다. 메시지를 추가 할 때 상위는 항상 400 픽셀이지만 대화는 + message.height로 증가합니다.

문제를 해결하는 방법은 무엇입니까? 채팅의 초기 높이와 같은 최대 높이를 추가하려고 시도하지만 작동하지 않습니다.

아이디어가 있으십니까?

Answer 1

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