Ignite UI for Angular 8.2.6 バージョン時点での情報に基づいています。

IgxGrid の列は、パーセントもしくはピクセルによる幅の指定ができます。ただし、これら二つの単位を混在することはできません。列幅を指定する場合、各列はパーセントもしくはピクセルで統一して下さい。

次に、正しい設定と正しくない設定の例を挙げます。

正しい設定・・・全ての列幅が、同じ単位(ピクセル)で統一されている。

<igx-grid primaryKey="ID" [data]="data">
  <igx-column field="ID" width="100px"></igx-column>
  <igx-column field="CompanyName" width="150px"></igx-column>
  <igx-column field="ContactName" width="150px"></igx-column>
</igx-grid>

正しくない設定1・・・ピクセルとパーセントが混在している。

<igx-grid primaryKey="ID" [data]="data">
  <igx-column field="ID" width="100px"></igx-column>
  <igx-column field="CompanyName" width="150px"></igx-column>
  <igx-column field="ContactName" width="15%"></igx-column> <!-- この列だけパーセント指定になっている! -->
</igx-grid>

正しくない設定2・・・1列目と3列目はパーセント指定されているが、2列目の幅が指定されていない。

幅を指定している列と、幅を指定していない列を混在させることもできません。

<igx-grid primaryKey="ID" [data]="data">
  <igx-column field="ID" width="10%"></igx-column>
  <igx-column field="CompanyName"></igx-column> <!-- この列だけ列幅の指定がない! -->
  <igx-column field="ContactName" width="15%"></igx-column>
</igx-grid>

参照:Ignite UI for Angular 既知の制限

Tagged: