Kendo angular 详细网格布局问题

Kendo angular detail grid layout issue

似乎 kendo angular 2 细节网格布局在放大 chrome 时很容易中断。设置列宽和这个有关系吗?

可在此处重现plunker link

<kendo-grid
          [data]="view | async"
          [pageSize]="5"
          [skip]="skip"
          [pageable]="true"
          [scrollable]="'none'"
          (pageChange)="pageChange($event)"
        >
      <kendo-grid-column field="ProductID" title="Product ID" width="120">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="220">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="220">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="120">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="220">
      </kendo-grid-column>
      <kendo-grid-column field="ProductName" title="Product Name">
      </kendo-grid-column>
      <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}">
      </kendo-grid-column>
      </kendo-grid>

要么将分辨率设置为 1048 x 768。要么放大 'in chrome' 网格布局中断(没有可导航的水平滚动条)

您需要设置产品名称和单价列的宽度,并在 kendogrid 中将可滚动 属性 设置为 "scrollable"。