[Grid]: Column Hiding Buttons size jumps when clicking on any of them

[simeonoff]

Description

The size of the action buttons in the grid toolbar hiding menu changes when I click on one of the buttons.

Here's the template:

<igx-grid-toolbar>

        <igx-grid-toolbar-actions>

            <igx-grid-toolbar-hiding

                buttonText="Spalten"

                i18nbuttonText

                checkAllText="Alle anzeigen"

                i18ncheckAllText

                uncheckAllText="Alle ausblenden"

                i18nuncheckAllText

                title="Sichtbare Spalten definieren"

                i18ntitle

                columnListHeight="400px"></igx-grid-toolbar-hiding>

        </igx-grid-toolbar-actions>

    </igx-grid-toolbar>

Here's the visual difference:

Normal view, without clicking on any of the buttons in the hiding menu:

After clicking on one of the buttons:

In addition to the template, here are the styles used with the buttons:

:root {
    --ig-font-family: font.$prinz-font-family-light;
    --ig-elevation-factor: 0; //keine Schatten anzeigen für IG-Komponenten
 
    //Farben für Fehler, Warnungen und success --> können über die Variablen hier nicht aufgelöst werden
    --ig-error-500: #be0c21;
    --ig-warn-500: #f08927;
    --ig-success-500: #44a347;
 
    // Größe für IG-Buttons (auch außerhalb eines Grid)
    --ig-size: var(--ig-size-small);
}
 
We have button themes for flat, outlined and contained Buttons:
 
$prinz-igx-button-theme: igx.outlined-button-theme(
    //Buttons rund wie auch die Material Buttons
    $border-radius: 1rem,
    //Farben
    $background: color.$prinz-color-primary,
    $hover-background: color.$prinz-color-primary,
    $focus-background: color.$prinz-color-primary,
    $active-background: color.$prinz-color-primary-dark,
    $foreground: color.$prinz-color-white,
    $hover-foreground: color.$prinz-color-white,
    $focus-foreground: color.$prinz-color-white,
    $active-foreground: color.$prinz-color-white,
    //disabled Buttons
    $disabled-background: color.$prinz-color-secondary-light,
    $disabled-foreground: color.$prinz-color-secondary
);
 
@include igx.css-vars($prinz-igx-button-theme);
 
$prinz-igx-flat-button-theme: igx.flat-button-theme(
    //Buttons rund wie auch die Material Buttons
    $border-radius: 1rem,
    //Farben
    $background: color.$prinz-color-primary,
    $hover-background: color.$prinz-color-primary,
    $focus-background: color.$prinz-color-primary,
    $active-background: color.$prinz-color-primary-dark,
    $foreground: color.$prinz-color-white,
    $hover-foreground: color.$prinz-color-white,
    $focus-foreground: color.$prinz-color-white,
    $active-foreground: color.$prinz-color-white,
    //disabled Buttons
    $disabled-background: color.$prinz-color-secondary-light,
    $disabled-foreground: color.$prinz-color-secondary
);
 
@include igx.css-vars($prinz-igx-flat-button-theme);
 
$prinz-igx-contained-button-theme: igx.contained-button-theme(
    //Buttons rund wie auch die Material Buttons
    $border-radius: 1rem,
    //Farben
    $background: color.$prinz-color-primary,
    $hover-background: color.$prinz-color-primary,
    $focus-background: color.$prinz-color-primary,
    $active-background: color.$prinz-color-primary-dark,
    $foreground: color.$prinz-color-white,
    $hover-foreground: color.$prinz-color-white,
    $focus-foreground: color.$prinz-color-white,
    $active-foreground: color.$prinz-color-white,
    //disabled Buttons
    $disabled-background: color.$prinz-color-secondary-light,
    $disabled-foreground: color.$prinz-color-secondary
);
 
@include igx.css-vars($prinz-igx-contained-button-theme);
 
And we inserted some space between the buttons:
div.igx-column-actions__buttons {
        button {
            margin-left: 2px;
            margin-right: 2px;
        }
    }

• igniteui-angular version: 21.0.x, 20.1.x
• browser: All

Result

The buttons jump in size.

Expected result

The buttons shouldn't change their size.

[didimmova]

I cannot seem to reproduce the issue. I've created a stackblitz sample here. You can check the sample and if you could update it to replicate the issue so we can further seek for a solution.