Skip to content

Commit a335491

Browse files
zdrawkuzdrawku
authored
Merge pull request #800 from IgniteUI/hPopov/fix-issue-793
Fixing grid sample widths (only in IE) and heights.
2 parents b9a67b7 + 4fe2cc0 commit a335491

20 files changed

+119
-119
lines changed

‎src/app/export-excel/excel-export-sample-1/excel-export-sample-1.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<p class="grid__wrapper">
2-
<igx-grid #igxGrid1 [data]="localData" [autoGenerate]="true" [height]="null"></igx-grid>
2+
<igx-grid #igxGrid1 [data]="localData" [autoGenerate]="true" [height]="null" width ="975px"></igx-grid>
33
<button (click)="exportButtonHandler()" class="exportButton">Export Grid to Excel</button>
44
</p>

‎src/app/grid/grid-conditional-cell-style/grid-conditional-cell-style.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<div class="grid__wrapper">
22
<igx-grid #grid1 [data]="data" height="500px" width="100%" [autoGenerate]="false">
3-
<igx-column header="Rank" field="Id" sortable="true" [editable]="true" [sortable]="true" [cellClasses]="rankClasses"></igx-column>
4-
<igx-column field="Name" header="Athlete" [sortable]="true"></igx-column>
3+
<igx-column header="Rank" field="Id" sortable="true" [editable]="true" [sortable]="true" [cellClasses]="rankClasses" width="16%"></igx-column>
4+
<igx-column field="Name" header="Athlete" [sortable]="true" width="18%"></igx-column>
55
<igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number" [editable]="true" [sortable]="true"
6-
[cellClasses]="beatsPerMinuteClasses"></igx-column>
6+
[cellClasses]="beatsPerMinuteClasses" width="16%"></igx-column>
77
<igx-column field="TopSpeed" header="Top Speed" dataType="number" [editable]="true" [sortable]="true"
8-
[cellClasses]="speedClasses">
8+
[cellClasses]="speedClasses" width="16%">
99
<ng-template igxCell let-val>
1010
<div class="cell__inner">
1111
{{ val | number: '1.1-5' }}
1212
</div>
1313
</ng-template>
1414
</igx-column>
15-
<igx-column field="TrackProgress" header="Track Progress" [editable]="true" [sortable]="true">
15+
<igx-column field="TrackProgress" header="Track Progress" [editable]="true" [sortable]="true" width="18%">
1616
<ng-template igxCell let-val>
1717
<div class="cellContainer">
1818
<span class="cellAlignSyle">
@@ -21,7 +21,7 @@
2121
</div>
2222
</ng-template>
2323
</igx-column>
24-
<igx-column field="CountryFlag" header="Country">
24+
<igx-column field="CountryFlag" header="Country" width="16%">
2525
<ng-template igxCell let-cell="cell">
2626
<div class="cell__inner_2">
2727
<span>

‎src/app/grid/grid-custom-filtering/grid-custom-filtering.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<div class="grid__wrapper">
2-
<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="600px" width="100%" [allowFiltering]="true">
3-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [filters]="caseSensitiveFilteringOperand">
2+
<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="550px" width="100%" [allowFiltering]="true">
3+
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [filters]="caseSensitiveFilteringOperand" width="20%">
44
</igx-column>
5-
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'">
5+
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'" width="20%">
66
</igx-column>
7-
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'">
7+
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" width="20%">
88
<ng-template igxCell let-cell="cell" let-val let-row>
99
{{+val | currency}}
1010
</ng-template>
1111
</igx-column>
12-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [formatter]="formatDate">
12+
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [formatter]="formatDate" width="20%">
1313
</igx-column>
14-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filters]="booleanFilteringOperand">
14+
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filters]="booleanFilteringOperand" width="20%">
1515
<ng-template igxCell let-cell="cell" let-val>
1616
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
1717
<img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />

‎src/app/grid/grid-filtering-sample/grid-filtering-sample.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
</igx-input-group><br>
66
</div>
77

8-
<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="520px" width="100%" [allowFiltering]="true">
9-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'">
8+
<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="480px" width="100%" [allowFiltering]="true">
9+
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="20%">
1010
</igx-column>
11-
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'">
11+
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'" width="20%">
1212
</igx-column>
13-
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'">
13+
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" width="20%">
1414
<ng-template igxCell let-cell="cell" let-val let-row>
1515
{{+val | currency}}
1616
</ng-template>
1717
</igx-column>
18-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [formatter]="formatDate">
18+
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [formatter]="formatDate" width="20%">
1919
</igx-column>
20-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'">
20+
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width="20%">
2121
<ng-template igxCell let-cell="cell" let-val>
2222
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
2323
<img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />

‎src/app/grid/grid-groupby-sample/grid-groupby-sample.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="grid__wrapper">
2-
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'600px'" [rowSelectable]='true' [groupingExpressions]='expr'>
2+
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [rowSelectable]='true' [groupingExpressions]='expr'>
33
<igx-column field="OrderID" header="Order ID" hidden=true >
44
</igx-column>
55
<igx-column field="ShipCountry" header="Ship Country" width="200px" [groupable]="true">

‎src/app/grid/grid-paging-sample/grid-paging-sample.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<div class="grid__wrapper">
22

33
<igx-grid #grid1 [data]="data" [paging]="true" [perPage]="10" [paginationTemplate]="pager" height="500px" width="100%" displayDensity="cosy">
4-
<igx-column header="Rank" headerClasses="myClass" field="Id" sortable="true">
4+
<igx-column header="Rank" headerClasses="myClass" field="Id" sortable="true" width = "16%">
55
</igx-column>
66

7-
<igx-column field="Name" header="Athlete">
7+
<igx-column field="Name" header="Athlete" width = "16%">
88
</igx-column>
99

10-
<igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number">
10+
<igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number" width = "16%">
1111
<ng-template igxCell let-val>
1212
<div class="cell__inner">
1313
{{ val }}
1414
</div>
1515
</ng-template>
1616
</igx-column>
1717

18-
<igx-column field="TopSpeed" header="Top Speed" dataType="number">
18+
<igx-column field="TopSpeed" header="Top Speed" dataType="number" width = "16%">
1919
<ng-template igxCell let-val>
2020
<div class="cell__inner">
2121
{{ val | number: '1.1-5' }}
2222
</div>
2323
</ng-template>
2424
</igx-column>
2525

26-
<igx-column field="TrackProgress" header="Track Progress">
26+
<igx-column field="TrackProgress" header="Track Progress" width = "18%">
2727
<ng-template igxCell let-val>
2828
<div class="linear-bar-container">
2929
<igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar>
3030
</div>
3131
</ng-template>
3232
</igx-column>
3333

34-
<igx-column field="CountryFlag" header="Country">
34+
<igx-column field="CountryFlag" header="Country" width = "18%">
3535
<ng-template igxCell let-cell="cell">
3636
<div class="cell__inner_2">
3737
<span>

‎src/app/grid/grid-paste/grid-paste-sample.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
</igx-drop-down>
99
<button id="download_excel" igxButton="raised" (click)="downloadExcel($event)">Download Sample Excel File</button>
1010
</div>
11-
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'505px'" [autoGenerate]="false" paste-handler (onDataProcessed)="dataPasted($event)" [primaryKey]="'ID'">
12-
<igx-column [field]="'Name'"></igx-column>
13-
<igx-column [field]="'Title'"></igx-column>
14-
<igx-column [field]="'Phone'"></igx-column>
15-
<igx-column [field]="'Country'"></igx-column>
11+
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'480px'" [autoGenerate]="false" paste-handler (onDataProcessed)="dataPasted($event)" [primaryKey]="'ID'">
12+
<igx-column [field]="'Name'" width="25%"></igx-column>
13+
<igx-column [field]="'Title'" width="25%"></igx-column>
14+
<igx-column [field]="'Phone'" width="25%"></igx-column>
15+
<igx-column [field]="'Country'" width="25%"></igx-column>
1616
</igx-grid>
1717
</div>

‎src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="grid__wrapper">
2-
<igx-grid #grid [data]="remoteData | async" [height]="'500px'" [width]="'100%'" [autoGenerate]='false'
2+
<igx-grid #grid [data]="remoteData | async" [height]="'440px'" [width]="'100%'" [autoGenerate]='false'
33
(onDataPreLoad)="processData()" (onSortingDone)="processData()" (onFilteringDone)="processData()"
44
[allowFiltering]="true">
5-
<igx-column [field]="'ProductID'" [sortable]="true" [filterable]="false"></igx-column>
6-
<igx-column [field]="'ProductName'" [sortable]="true"></igx-column>
7-
<igx-column [field]="'UnitPrice'" [dataType]="'number'" [formatter]="formatCurrency" [sortable]="true"></igx-column>
8-
<igx-column [field]="'UnitsInStock'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'" [sortable]="true">
5+
<igx-column [field]="'ProductID'" [sortable]="true" [filterable]="false" width="18%"></igx-column>
6+
<igx-column [field]="'ProductName'" [sortable]="true" width="16%"></igx-column>
7+
<igx-column [field]="'UnitPrice'" [dataType]="'number'" [formatter]="formatCurrency" [sortable]="true" width="16%"></igx-column>
8+
<igx-column [field]="'UnitsInStock'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'" [sortable]="true" width="16%">
99
<ng-template igxHeader>
1010
<span class="cellAlignSyle">UnitsInStock</span>
1111
</ng-template>
@@ -17,8 +17,8 @@
1717
</div>
1818
</ng-template>
1919
</igx-column>
20-
<igx-column [field]="'QuantityPerUnit'" [sortable]="true"></igx-column>
21-
<igx-column [field]="'ReorderLevel'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'" [sortable]="true">
20+
<igx-column [field]="'QuantityPerUnit'" [sortable]="true" width="18%"></igx-column >
21+
<igx-column [field]="'ReorderLevel'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'" [sortable]="true" width="16%">
2222
<ng-template igxHeader>
2323
<span class="cellAlignSyle">ReorderLevel</span>
2424
</ng-template>

‎src/app/grid/grid-resizing-sample/grid-resizing-sample.component.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="grid__wrapper">
2-
<igx-grid [data]="data" (onColumnResized)="onResize($event)" [autoGenerate]="false" height="550px" width="100%">
3-
<igx-column [field]="'ID'" [header]="'ID'" width="100px" [resizable]="true"></igx-column>
4-
<igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px" [resizable]="true"></igx-column>
5-
<igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [resizable]="true" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
6-
<igx-column [field]="'ContactTitle'" [header]="'Contact Title'" width="100px" [resizable]="true"></igx-column>
7-
<igx-column [field]="'Address'" [header]="'Address'" width="100px" [resizable]="true"></igx-column>
8-
<igx-column [field]="'City'" [header]="'City'" width="100px" [resizable]="true"></igx-column>
9-
<igx-column [field]="'Region'" [header]="'Region'" width="100px" [resizable]="true"></igx-column>
10-
<igx-column [field]="'PostalCode'" [header]="'Postal Code'" width="100px" [resizable]="true"></igx-column>
11-
<igx-column [field]="'Phone'" [header]="'Phone'" width="100px" [resizable]="true"></igx-column>
12-
<igx-column [field]="'Fax'" [header]="'Fax'" width="100px" [resizable]="true"></igx-column>
2+
<igx-grid [data]="data" (onColumnResized)="onResize($event)" [autoGenerate]="false" height="500px" width="100%">
3+
<igx-column [field]="'ID'" [header]="'ID'" width="10%" [resizable]="true"></igx-column>
4+
<igx-column [field]="'CompanyName'" [header]="'Company Name'" width="10%" [resizable]="true"></igx-column>
5+
<igx-column [field]="'ContactName'" [header]="'Contact Name'" width="10%" [resizable]="true" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
6+
<igx-column [field]="'ContactTitle'" [header]="'Contact Title'" width="10%" [resizable]="true"></igx-column>
7+
<igx-column [field]="'Address'" [header]="'Address'" width="10%" [resizable]="true"></igx-column>
8+
<igx-column [field]="'City'" [header]="'City'" width="10%" [resizable]="true"></igx-column>
9+
<igx-column [field]="'Region'" [header]="'Region'" width="10%" [resizable]="true"></igx-column>
10+
<igx-column [field]="'PostalCode'" [header]="'Postal Code'" width="10%" [resizable]="true"></igx-column>
11+
<igx-column [field]="'Phone'" [header]="'Phone'" width="10%" [resizable]="true"></igx-column>
12+
<igx-column [field]="'Fax'" [header]="'Fax'" width="10%" [resizable]="true"></igx-column>
1313
</igx-grid>
1414
</div>

‎src/app/grid/grid-row-editing-sample/grid-row-editing-sample.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<div class="sample-wrapper">
22
<igx-grid #gridRowEdit [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
33
[rowEditable]="true">
4-
<igx-column field="ProductID" header="Product ID"></igx-column>
5-
<igx-column field="ReorderLevel" header="ReorderLever" [dataType]="'number'"></igx-column>
6-
<igx-column field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
7-
<igx-column field="UnitsInStock" header="UnitsInStock" [dataType]="'number'">
4+
<igx-column field="ProductID" header="Product ID" width = "16%"></igx-column>
5+
<igx-column field="ReorderLevel" header="ReorderLever" [dataType]="'number'" width = "16%"></igx-column>
6+
<igx-column field="ProductName" header="ProductName" [dataType]="'string'" width = "18%"></igx-column>
7+
<igx-column field="UnitsInStock" header="UnitsInStock" [dataType]="'number'" width = "16%">
88
<ng-template igxCellEditor let-cell="cell">
99
<input [igxFocus]='true' name="units" [(ngModel)]="cell.value" style="color: black" />
1010
</ng-template>
1111
</igx-column>
12-
<igx-column field="OrderDate" [dataType]="'date'"></igx-column>
13-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'"></igx-column>
12+
<igx-column field="OrderDate" [dataType]="'date'" width = "18%"></igx-column>
13+
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width = "16%"></igx-column>
1414
</igx-grid>
1515
</div>

0 commit comments

Comments
 (0)