Excel Style Filtering Overlay not fully shown on limited space

[RolandTa]

Description

When only limited space is available the excel style filtering overlay is not fully shown.

• igniteui-angular version: 8.1.4
• browser: Google Chrome 76.0.3809.132

Steps to reproduce

See https://stackblitz.com/edit/angular-qdpv3z and open the filter overlay.

Result

The overlay is not fully shown and will be cut.

Expected result

The overlay settings should be adjusted to AutoPositionStrategy or there should be an option to custom define the overlay setting.

[zdrawku]

@RolandTa, actually this is not a bug in the ExcelStyleFiltering component. Currently, the position strategy that is used (ConnectedPositioningStrategy) is expected to be working that way. What can we do:

• we can change the default Connected strategy to one of the following - AutoPositionStrategy or ElasticPositionStrategy. This will introduce some changes in the visual behavior, although it will prevent the scenario that you've pointed out - behaviors like, positioning of the overlay over the open-filter button or moving it over another element in the page (gif provided below)
• expose @input for positionStrategy.
• as @DiyanDimitrov and @radomirchev already discussed, we can provide a way to visualize the ExcelStyleFilter dialog in certain custom panel or other containers.

Note: there is a fixed height to the grid-excel-filter element that should be removed in _excel-filtering-theme.scss

@mixin _excel-filtering($theme, $palette) {
    %grid-excel-filter {
        // height: rem(15px);
        display: block;
    }

@StefanIvanov @DaniMarinov you can provide comments on the visual behavior change that may happen

[DaniMarinov]

@RolandTa Definitely, the best solution is what @zdrawku suggested - AutoPositionStrategy or ElasticPositionStrategy. Of course, if you want to further optimize it , you can switch off Pinning and Sorting within the Excel Style Filtering, as well as to enlarge the height of the grid.

[RolandTa]

@DaniMarinov @zdrawku Thanks for your suggestions which sounds good to me. Changing the default behavior to AutoPositionStrategy or EleasticPositionStrategy would solve my issue. In case this would somehow break current design behavior - exposing an @input to define the positionStrategy by myself would also do the trick.