ng-template matExpansionPanelContent固定高度

时间:2018-06-21 11:03:26

标签: angular-material angular5

如果我的数据更多,我喜欢使用可滚动滚动的扩展面板内容。 那么如何固定一个扩展面板内容的高度。我的代码是 如下

<mat-accordion>
  <mat-expansion-panel *ngFor="let analytic of analytics" (opened)="panelOpen(analytic.group_title_uri)">
    <mat-expansion-panel-header>
      {{analytic.group_title}}
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      <span matLine>Showing {{limit_display}} of {{total_count}} results. Click here for the full list</span>
      <mat-list>
        <mat-list-item *ngFor="let message of [1,2,3,4]">
          <div matLine>
            <span class="company-name">[ Data ]</span>
            <a href="#" class="analytics-link"> <i class="fa fa-fw fa-external-link" aria-hidden="true"></i></a>
          </div>
          <p matLine class="analytics-desc">Most Active - NASDAQ 100 </p>
        </mat-list-item>
      </mat-list>
    </ng-template>
  </mat-expansion-panel>


</mat-accordion>

1 个答案:

答案 0 :(得分:0)

 <mat-expansion-panel expanded="true" hideToggle="true" class="scrolling_data" >

.scrolling_data {
   overflow-y: scroll !important;
   max-height: 400px;
}