Skip to content

Commit c758315

Browse files
skrustevskrustev
committed
fix(pivotGrid): Fix inital size of pivot grid not sizing based on content when parent has no width.
1 parent eaa8a04 commit c758315

File tree

5 files changed

+46
-39
lines changed

5 files changed

+46
-39
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3496,16 +3496,21 @@
34963496
> .igx-grid-thead__wrapper {
34973497
border-bottom: initial;
34983498
}
3499-
}
35003499

3501-
%igx-grid__tbody-pivot-mrl-dimension {
35023500
.igx-grid-th {
3503-
border-bottom: none;
3501+
height: 100%;
35043502
}
3503+
}
35053504

3505+
%igx-grid__tbody-pivot-mrl-dimension {
35063506
> .igx-grid-thead__wrapper {
35073507
border-bottom: initial;
35083508
}
3509+
3510+
.igx-grid-th {
3511+
height: 100%;
3512+
border-bottom: none;
3513+
}
35093514
}
35103515

35113516
// Pivot grid END

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,7 @@
137137
class="igx-grid__tbody-pivot-dimension"
138138
[style.height.px]="totalHeight"
139139
(focus)="navigation.focusTbody($event)"
140-
(keydown)="navigation.handleNavigation($event)"
141-
[style.width.px]="rowDimensionWidthToPixels(dim)">
140+
(keydown)="navigation.handleNavigation($event)">
142141
<ng-template igxGridFor let-rowData [igxGridForOf]="dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
143142
let-rowIndex="index"
144143
[igxForScrollOrientation]="'vertical'"
@@ -155,15 +154,15 @@
155154
[width]="rowDimensionWidthToPixels(dim)">
156155
</igx-pivot-row-dimension-content>
157156
</ng-template>
158-
<div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.width]="'100%'" [style.height.px]="remainingBottomSize">
159-
<div class="igx-grid-th" [style.width]="'100%'" [style.height]="'100%'"></div>
157+
<div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="rowDimensionWidthToPixels(dim)">
158+
<div class="igx-grid-th"></div>
160159
</div>
161160
</div>
162161

163162
</ng-template>
164163

165164
<ng-template #horizontalRowDimensionsTemplate>
166-
<div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)" [style.width.px]="pivotRowWidths">
165+
<div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
167166
<ng-container *ngIf="dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger as groupedData">
168167
<ng-template #verticalRowDimScrollContainer role="rowgroup" igxGridFor let-rowGroup let-rowIndex="index"
169168
[igxGridForOf]="groupedData"
@@ -176,8 +175,8 @@
176175
<igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
177176
</ng-template>
178177
</ng-container>
179-
<div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.width.px]="'100%'" [style.height.px]="remainingBottomSize">
180-
<div class="igx-grid-th" [style.width]="'100%'" [style.height]="'100%'"></div>
178+
<div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="pivotRowWidths">
179+
<div class="igx-grid-th"></div>
181180
</div>
182181
</div>
183182
</ng-template>

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1294,7 +1294,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
12941294
/** @hidden @internal */
12951295
public get pivotContentCalcWidth() {
12961296
if (!this.visibleRowDimensions.length) {
1297-
return this.calcWidth - this.pivotRowWidths;
1297+
return Math.max(0, this.calcWidth - this.pivotRowWidths);
12981298
}
12991299

13001300
const totalDimWidth = this.visibleRowDimensions.length > 0 ?

‎src/app/pivot-grid-state/pivot-grid-state.sample.html‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
<div class="sample-flex-row">
2-
<button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
3-
<button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
4-
<button igxButton="contained" (click)="export()">EXPORT</button>
5-
<igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
6-
<igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
7-
<div class="pivot-container">
82
<div>
9-
<igx-pivot-grid
10-
#grid1
11-
[igxGridState]="options"
12-
(valueInit)='onValueInit($event)'
13-
(dimensionInit)='onDimensionInit($event)'
14-
[data]="origData"
15-
[width]="'100%'"
16-
[height]="'800px'"
17-
[superCompactMode]="true"
18-
[defaultExpandState]="true"
19-
[pivotConfiguration]="pivotConfigHierarchy"
20-
[pivotUI]="pivotUI"
21-
[allowFiltering]="true"
22-
[filterMode]="'quickFilter'"
23-
[rowSelection]="'single'"
24-
>
25-
<ng-template igxPivotRowDimensionHeader let-col>
26-
<span>{{col.header}} 📐</span>
27-
</ng-template>
28-
</igx-pivot-grid>
3+
<button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
4+
<button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
5+
<button igxButton="contained" (click)="export()">EXPORT</button>
6+
<igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
7+
<igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
8+
</div>
9+
<div class="pivot-container">
10+
<div style="width: 100%;">
11+
<igx-pivot-grid
12+
#grid1
13+
[igxGridState]="options"
14+
(valueInit)='onValueInit($event)'
15+
(dimensionInit)='onDimensionInit($event)'
16+
[data]="origData"
17+
[width]="'100%'"
18+
[height]="'800px'"
19+
[superCompactMode]="true"
20+
[defaultExpandState]="true"
21+
[pivotConfiguration]="pivotConfigHierarchy"
22+
[pivotUI]="pivotUI"
23+
[allowFiltering]="true"
24+
[filterMode]="'quickFilter'"
25+
[rowSelection]="'single'"
26+
>
27+
<ng-template igxPivotRowDimensionHeader let-col>
28+
<span>{{col.header}} 📐</span>
29+
</ng-template>
30+
</igx-pivot-grid>
31+
</div>
32+
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
2933
</div>
30-
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
3134
</div>

‎src/app/pivot-grid-state/pivot-grid-state.sample.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ igx-pivot-grid {
1313
}
1414

1515
.sample-flex-row {
16-
align-items: center;
1716
display: flex;
17+
flex-direction: column;
1818
flex-wrap: wrap;
1919
gap: 16px;
2020
margin-bottom: 16px;

0 commit comments

Comments
 (0)