Repository navigation
Excel-style filter ignores --ig-size when minHeight/maxHeight are set (22.1 regression) #17589
Description
Activity
🤖 AI Assistant · 💬 I reply to comments in this thread when @mentioned. This is an automated acknowledgement.
Thank you for reporting this issue! 🐛
We've labelled this as a bug and notified @IgniteUI/support-team. A human maintainer will investigate and follow up as soon as possible.
Thank you for contributing to the project! 🙏
To help the team move this forward, could you please share the following info, that might also be relevant:
- Can you provide a minimal code sample or StackBlitz reproduction that demonstrates the issue? This should include the grid setup with
--ig-sizeset to small and the excel-style-filtering component with minHeight/maxHeight. - Can you provide a screenshot or visual comparison showing the padding difference between version 22.0 (correct behavior with 4px padding) and 22.1 (incorrect behavior with 1rem padding)?
- Can you provide a minimal code sample or StackBlitz reproduction that demonstrates the issue? This should include the grid setup with
Minimal repro: https://stackblitz.com/edit/rtf3lkj5
One additional detail I found: the regression only shows when the filter is rendered outside the
igx-gridelement via a custom[outlet].Select Small and open a filter.
Before:
Now:
@Timmeeeey Seems to me that the size is applied correctly to components, but with the new popover, the rest of the styles now also propagate correctly in the outlet, where before the styling was actually broken (no paddings, margins, etc.)
@kdinev Thanks for looking into it. I agree the styles now reach the outlet correctly. But the paddings don't follow
--ig-sizein every case:- Without
minHeight/maxHeight(same custom outlet): the padding changes with Small / Medium / Large as expected. - With
minHeight/maxHeightset: the padding stays at the large value (1rem) whatever the size is.
So the size depends on whether
minHeight/maxHeightare set, and I don't think that's intended.- Without
@simeonoff please take a look at this! Thank you!
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