Description
Since 22.1 the excel-style filtering menu renders with large-size padding (1rem) even when --ig-size is small, if minHeight or maxHeight is set on igx-grid-excel-style-filtering.
In 22.0 the sizable() mixin was applied to .igx-excel-filter__menu (_excel-filtering-component.scss), so the --is-small/--is-medium/--is-large variables were always available. In 22.1 (styles bundled into the component, #15125) sizable() is only included on .igx-excel-filter__sizing. That class is bound to shouldApplySizes, which is false as soon as minHeight or maxHeight is set. Without the --is-* variables every pad()-based padding falls back to var(--is-*, 1) and max(...) resolves to the large value.
Framework
Angular
Angular Version
22.1
Ignite UI for Angular Version
22.1.3
Component / Area
Grid
Browser
Edge
Operating System
Windows
Command Not Working
Steps to Reproduce
- Set
--ig-size: var(--ig-size-small) (e.g. on :root).
- Use a grid with
<igx-grid-excel-style-filtering [minHeight]="'350px'" [maxHeight]="'500px'">.
- Open the excel-style filter.
Actual Result
Header, main area and action rows use 1rem padding. --component-size on the menu is 1, but --is-small/--is-medium/--is-large are undefined.
Expected Result
Padding follows --ig-size as in 22.0 (4px for small).
Reproduction URL
No response
Attachments
No response
Description
Since 22.1 the excel-style filtering menu renders with large-size padding (1rem) even when
--ig-sizeis small, ifminHeightormaxHeightis set onigx-grid-excel-style-filtering.In 22.0 the
sizable()mixin was applied to.igx-excel-filter__menu(_excel-filtering-component.scss), so the--is-small/--is-medium/--is-largevariables were always available. In 22.1 (styles bundled into the component, #15125)sizable()is only included on.igx-excel-filter__sizing. That class is bound toshouldApplySizes, which isfalseas soon asminHeightormaxHeightis set. Without the--is-*variables everypad()-based padding falls back tovar(--is-*, 1)andmax(...)resolves to the large value.Framework
Angular
Angular Version
22.1
Ignite UI for Angular Version
22.1.3
Component / Area
Grid
Browser
Edge
Operating System
Windows
Command Not Working
Steps to Reproduce
--ig-size: var(--ig-size-small)(e.g. on:root).<igx-grid-excel-style-filtering [minHeight]="'350px'" [maxHeight]="'500px'">.Actual Result
Header, main area and action rows use 1rem padding.
--component-sizeon the menu is1, but--is-small/--is-medium/--is-largeare undefined.Expected Result
Padding follows
--ig-sizeas in 22.0 (4px for small).Reproduction URL
No response
Attachments
No response