带有Flex模式的Ngx-datatabel响应行详细信息

时间:2018-07-17 09:54:40

标签: css angular ngx-datatable

我的ngx数据表行详细信息有问题。 一切似乎工作正常,所有列和行都响应迅速。当我打开行详细信息时,它们显示得很好。但是,如果我更改浏览器的宽度,则细节将不会随行和列而缩放。它具有初始固定宽度,该宽度基于首次加载页面的时间。我似乎无法更改它。有什么建议吗?

start page

Bigger browser width

Smaller browser width

 <ngx-datatable
    #myTable
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="details">
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)" flex>
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template >
        <div style="padding-left:35px;">
          <div><strong>Address Address Address Address Address AddressAddressAddress Address Address Address Address Address</strong></div>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <ngx-datatable-column name="Name" [flexGrow]="1">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
          <a
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">aaa
        </a>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Name" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        testing 3
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender" [flexGrow]="5">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        testing
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Age" [flexGrow]="5">
      <ng-template let-row="row" ngx-datatable-cell-template>
        testingsecond
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

1 个答案:

答案 0 :(得分:0)

:host ::ng-deep .ngx-datatable .datatable-body .datatable-scroll {
  display: inherit;
}

在这种情况下有效