0

I have a Metronic 8.1.2 template (Angular) and I wish to use the IgniteUI (am on trial, but evaluating buying it).

The problem I've is that if I set the width to 100% it won't cover the full width available...

Here's the code:


<igx-grid [data]="Items" height="400px" primaryKey="id" [allowFiltering]="true" [rowEditable]="true"
          (rowAdd)="addRow($event)">
  <igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
    <igx-grid-toolbar-actions>
      <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
      <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
      <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
      <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>
  
  </igx-grid-toolbar>
  <igx-column field="id" [hidden]="true" dataType="string"></igx-column>
  <igx-column field="tipo" header="Tipo" dataType="string"></igx-column>
  <igx-column field="descrizione" header="Descrizione" dataType="string"></igx-column>
  <igx-column [width]="'100px'">
    <ng-template igxCell let-cell="cell">
      <button igxButton="icon" (click)="editItem(cell.row.data)">
        <igx-icon>edit</igx-icon>
      </button>
      <button igxButton="icon" (click)="deleteItem(cell.row.data)">
        <igx-icon>delete</igx-icon>
      </button>
    </ng-template>
  </igx-column>
</igx-grid>

and here's the result

enter image description here

Also if I remove the height, the grid goes forever down

advapi
  • 3,661
  • 4
  • 38
  • 73

1 Answers1

0

When the width of the igxGrid is set to percentages it will size itself based on the parent element's width. If the parent element does not have width specified the igxGrid will size relative to the browser window.

I would recommend reading the Grid Sizing topic in order to familiarize yourself wiht the possible configurations.

Zdravko Kolev
  • 1,569
  • 14
  • 20