Skip to content

Commit 746183a

Browse files
desig9steinMPopovrkaraivanov
authored
fix(grid-toolbar): custom content misalignment (#9422)
* fix(grid-toolbar): custom content misalignment Co-authored-by: MPopov <[email protected]> Co-authored-by: Radoslav Karaivanov <[email protected]>
1 parent 5d106fc commit 746183a

File tree

3 files changed

+71
-28
lines changed

3 files changed

+71
-28
lines changed

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

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,8 @@
8787
selector: $selector,
8888
palette: $palette,
8989
elevations: $elevations,
90-
9190
background-color: $background-color,
9291
title-text-color: $title-text-color,
93-
9492
item-text-color: $item-text-color,
9593
dropdown-background: $dropdown-background,
9694
item-hover-background: $item-hover-background,
@@ -125,6 +123,12 @@
125123
compact: 0 rem(8px) 0 rem(12px)
126124
);
127125

126+
$grid-toolbar-spacer: (
127+
comfortable: rem(16px),
128+
cosy: rem(12px),
129+
compact: rem(8px)
130+
);
131+
128132
$grid-toolbar-padding-rtl: (
129133
comfortable: 0 rem(24px) 0 rem(16px),
130134
cosy: 0 rem(16px) 0 rem(12px),
@@ -149,16 +153,24 @@
149153
min-height: map-get($grid-toolbar-height, 'comfortable');
150154
position: relative;
151155

152-
@include if-ltr(){
156+
@include if-ltr() {
153157
padding: map-get($grid-toolbar-padding, 'comfortable');
154158
}
155159

156-
@include if-rtl(){
160+
@include if-rtl() {
157161
padding: map-get($grid-toolbar-padding-rtl, 'comfortable');
158162
}
159163

160164
[igxButton] {
161-
margin-#{$left}: rem(16);
165+
margin-#{$left}: map-get($grid-toolbar-spacer, 'comfortable');
166+
167+
&:first-of-type {
168+
margin-#{$left}: 0;
169+
}
170+
171+
&:last-of-type {
172+
margin-#{$right}: 0;
173+
}
162174
}
163175

164176
&[dir='rtl'] {
@@ -167,6 +179,10 @@
167179
[igxButton] {
168180
margin-#{$left}: 0;
169181
margin-#{$right}: rem(8);
182+
183+
&:last-child {
184+
margin-#{$right}: 0;
185+
}
170186
}
171187
}
172188
}
@@ -182,7 +198,7 @@
182198
}
183199

184200
[igxButton] {
185-
margin-#{$left}: rem(12);
201+
margin-#{$left}: map-get($grid-toolbar-spacer, 'cosy');
186202
}
187203
}
188204

@@ -197,7 +213,7 @@
197213
}
198214

199215
[igxButton] {
200-
margin-#{$left}: rem(8);
216+
margin-#{$left}: map-get($grid-toolbar-spacer, 'compact');
201217
}
202218
}
203219

@@ -206,17 +222,46 @@
206222
flex: 1 1 auto;
207223
@include ellipsis();
208224
max-width: 40ch;
225+
margin-#{$right}: map-get($grid-toolbar-spacer, 'comfortable')
209226
}
210227

211228
%igx-grid-toolbar__custom-content {
212229
display: flex;
213-
flex-flow: row wrap;
230+
flex-wrap: wrap;
231+
flex-grow: 1;
232+
justify-content: flex-end;
214233
}
215234

216235
%igx-grid-toolbar__actions {
217236
display: flex;
218237
align-items: center;
219238
flex-flow: row wrap;
239+
margin-#{$left}: map-get($grid-toolbar-spacer, 'comfortable');
240+
241+
> * {
242+
display: flex;
243+
margin-#{$left}: map-get($grid-toolbar-spacer, 'comfortable');
244+
245+
&:first-child {
246+
margin-#{$left}: 0;
247+
}
248+
}
249+
}
250+
251+
%igx-grid-toolbar__actions,
252+
%igx-grid-toolbar__title,
253+
%igx-grid-toolbar__custom-content {
254+
&:empty {
255+
display: none;
256+
}
257+
}
258+
259+
%igx-grid-toolbar__title:empty + %igx-grid-toolbar__custom-content:empty {
260+
+ %igx-grid-toolbar__actions {
261+
width: 100%;
262+
margin-left: 0;
263+
justify-content: flex-end;
264+
}
220265
}
221266

222267
%igx-grid-toolbar__progress-bar {

‎src/app/grid-column-selection/grid-column-selection.sample.html‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,30 @@
2424
<!-- <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering> -->
2525
</igx-grid-toolbar-actions>
2626
<button igxButton="outlined" #columnSelectionButton igxRipple (click)="toggleColumnSelection()"
27-
[displayDensity]="grid1.displayDensity">
28-
<div class="igx-grid-toolbar__button-space">
29-
<igx-checkbox [checked]="true" [disableRipple]="true" [readonly]="true" [disabled]="true">
30-
</igx-checkbox>
31-
<span>{{ grid1.selectedColumns().length }}</span>
32-
</div>
27+
[displayDensity]="grid1.displayDensity">
28+
<igx-checkbox [checked]="true" [disableRipple]="true" [readonly]="true" [disabled]="true">
29+
</igx-checkbox>
30+
<span>{{ grid1.selectedColumns().length }}</span>
3331
</button>
3432
<igx-drop-down #columnSelectionDropdown>
3533
<igx-input-group class="igx-column-hiding__header-input">
3634
<input igxInput tabindex="0" [(ngModel)]="searchSelectedColumn"
37-
[placeholder]="'Filter Column list ...'" autocomplete="off" />
35+
[placeholder]="'Filter Column list ...'" autocomplete="off" />
3836
</igx-input-group>
3937
<div class="igx-column-hiding__columns"
40-
[style.max-height]="(grid1.calcHeight) ? grid1.calcHeight * 0.7 + 'px' : '100%'">
38+
[style.max-height]="(grid1.calcHeight) ? grid1.calcHeight * 0.7 + 'px' : '100%'">
4139
<igx-checkbox
42-
*ngFor="let columnItem of grid1.columns | filterColumns: searchSelectedColumn"
43-
class="igx-column-hiding__columns-item"
44-
(change)="columnItem.selected = !columnItem.selected" [checked]="columnItem.selected"
45-
[disabled]="!columnItem.selectable">
40+
*ngFor="let columnItem of grid1.columns | filterColumns: searchSelectedColumn"
41+
class="igx-column-hiding__columns-item"
42+
(change)="columnItem.selected = !columnItem.selected" [checked]="columnItem.selected"
43+
[disabled]="!columnItem.selectable">
4644
{{ columnItem.field }}
4745
</igx-checkbox>
4846
</div>
4947
<div class="igx-column-hiding__buttons">
5048
<button igxButton igxRipple (click)="grid1.selectAllColumns()">Select All</button>
5149
<button igxButton igxRipple (click)="grid1.deselectAllColumns()"
52-
[disabled]="grid1.selectedColumns().length === 0">Deselect All</button>
50+
[disabled]="grid1.selectedColumns().length === 0">Deselect All</button>
5351
</div>
5452
</igx-drop-down>
5553
</igx-grid-toolbar>

‎src/app/grid-toolbar/grid-toolbar-custom.sample.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ <h4 class="sample-title">Toolbar</h4>
55

66
<igx-grid #grid1 [data]="data" [autoGenerate]="true" height="400px" width="1100px" [allowFiltering]="true" (columnInit)="initColumns($event)">
77
<igx-grid-toolbar *ngIf="showToolbar" [displayDensity]="grid1.displayDensity">
8-
<igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>
9-
<button igxButton="flat" igxRipple [igxRippleCentered]="true" (click)="grid1.clearFilter()">
10-
<igx-icon fontSet="material" name="clear"></igx-icon>
11-
Clear Filter
8+
<!-- <igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>-->
9+
<button igxButton="raised" igxRipple [igxRippleCentered]="true" (click)="grid1.clearFilter()">
10+
<igx-icon>clear</igx-icon>
11+
<span>Clear</span>
1212
</button>
13-
<button igxButton="flat" igxRipple [igxRippleCentered]="true" (click)="grid1.clearSort()">
14-
<igx-icon fontSet="material" name="clear"></igx-icon>
15-
Clear Sort
13+
<button igxButton="raised" igxRipple [igxRippleCentered]="true" (click)="grid1.clearSort()">
14+
<igx-icon>clear</igx-icon>
15+
<span>Clear Sort</span>
1616
</button>
1717
<igx-grid-toolbar-actions>
1818
<igx-grid-toolbar-pinning *ngIf="columnPinning"></igx-grid-toolbar-pinning>

0 commit comments

Comments
 (0)