igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group.

[norikois]

Description

igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group.

• igniteui-angular version: ^6.2.0
• browser: IE11

Steps to reproduce

1. npm install and npm start. Open http://localhost4200 in IE11.
2. Click ">" several times and click "Tab 3"

Result

The grid is not displayed properly.
See the attached screen shot. It seems that the data records are rendered in a very narrow width.

Note1:
This issue is not reproduced with Chrome.

Note2:
If you resize the browser width, the grid is displayed properly.

Expected result

The data records are displayed properly.

Attachments

igx-grid in igx-tabs - Copied.zip

[tkiryu]

I checked this issue on [email protected] and later and it turned out that the following two problems are showing up.

Have you recognized these problems with [email protected] and 7.1.0? If not, could you take a look at them? Or, should I log it as another issue?

1. igx-grid throws errors at igx-tabs initial rendering, although igx-grid has not been rendered yet.
   
   In English.

Cannot read property 'clientHeight' of undefined or null.
Cannot read property 'offsetHeight' of undefined or null.

2. igx-grid also throws errors when resizing window, , although igx-grid has not been rendered yet.
   
   In English.

Cannot read property 'offsetHeight' of undefined or null.

[mpavlinov]

@tkiryu Yes. We've identified those and they should be fixed by the current PRs. However there are some other issues that we will list shortly. That's the reason Zdravko returned the issue in "in-development" state.

[ChronosSF]

• If you put width in pixels and remove the column width the following happens:

<igx-grid #grid [data]="data" [primaryKey]="'id'" [width]="'700px'" >
    <igx-column *ngFor="let column of columns" [field]="column.field" [header]="column.field"></igx-column>
</igx-grid>

In Chrome:

• If you put height in pixels, the height specified is assigned to the body and the header takes additional 50 pixels cutting off the bottom of the grid in a tab.

<igx-grid #grid [data]="data" [primaryKey]="'id'" [height]="'300px'" >
    <igx-column *ngFor="let column of columns" [field]="column.field" [header]="column.field" [width]="column.width"></igx-column>
</igx-grid>

In Chrome:

[PavlovVasil]

@norikois, @tkiryu ,@mpavlinov, @ChronosSF
All of these are for IE11:

The configuration shown above causes a slightly different behavior:

• The grid does not show all the columns, but there is no scrollbar either:

• Setting [width]="'200px'" for the columns and removing the grid width shows only two columns (which is expected), but again - no scrollbar:

• Setting the grid width to a number bigger than the container width actually shows a horizontal scrollbar, but when scrolling to the right, the last column is not fully visible. This is what grid [width]="''500px" looks like in IE11:

• Setting both the height and width of the grid to be larger that the container does not render the horizontal scrollbar and the last row is not shown correctly:

• Setting the grid width to 100% and the columns width to 25% does not render the columns correctly: