Column Hiding expands the whole toolbar-> Bug, Check the image attached

[amitmoondra]

Description

After clicking column hiding button on the igx grid toolbar and then clicking somewhere else, The whole toolbar row expands to the size of the column hiding dropdown. This is a bug, please solve this ASAP.

• igniteui-angular version:
• browser:

Steps to reproduce

1. Step 1
2. Step 2
3. ...

Result

What is the actual result after following the steps to reproduce?

Expected result

What is the expected result after following the steps to reproduce?

Attachments

Attach a sample if available, and screenshots, if applicable.

[amitmoondra]

This is been here since a long while, can someone reply to this please? @hanastasov

[hanastasov]

This is been here since a long while, can someone reply to this please? @hanastasov

@https://github.com/amitmoondra Hi Amit, I was not able to replicate the described behavior. Could you please provide the markup of the page, or a running sample ideally? It will be also helpful to know the exact version of igniteui-angular used in your project.

[amitmoondra]

@hanastasov,

I am attaching a video that shows the behavior. also the version of igniteui -angular i am using is latest one 11.0.9

https://user-images.githubusercontent.com/20819281/103898390-dcc79900-511a-11eb-8652-396e5ed60a98.mp4

[hanastasov]

Thanks for the video, Amit @https://github.com/amitmoondra.

Anyway, I will really need the markup for the container that holds all these buttons (Publish, Versions, Advanced Filtering, etc.). I guess it is the default igx-toolbar, but I need the markup that it is filled with.

[amitmoondra]

`<igx-grid-toolbar *ngIf="showToolbar">

{{toolbarTitle}}

        <igx-grid-toolbar-actions>
            <button *ngIf="submitButton && !hideShowVersion" (click)="submit()" igxButton="outlined"
                igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white" [displayDensity]="'compact'">
                {{submitText}}
            </button>
            <button *ngIf="showVersions && !hideShowVersion" (click)="toggleVersions()" igxButton="outlined"
                igxButtonColor="white" igxButtonBackground="#FEC169" igxRipple="white" [displayDensity]="'compact'">
                <igx-icon fontSet="material">content_copy</igx-icon>&nbsp;Versions
            </button>
            <igx-select #select [hidden]="!hideShowVersion" [(ngModel)]="fromCompareVersions" (ngModelChange)="emitVersionCompareEvent()" type="border" class="select-size"
                [displayDensity]="'compact'">
                <label igxLabel>Select Version</label>
                <igx-prefix>
                    <span class="bio-prefix">Compare</span>
                </igx-prefix>
                <igx-select-item *ngFor="let item of versions" [value]="item.id">
                    {{item.createdDateTime | date:'M/dd/yyyy HH:mm'}} v.{{item.version}}
                </igx-select-item>
            </igx-select>
            &nbsp;&nbsp;
            <igx-select #select [hidden]="!hideShowVersion" [(ngModel)]="withCompareVersions" (ngModelChange)="emitVersionCompareEvent()" type="border" class="select-size"
                [displayDensity]="'compact'">
                <label igxLabel>Select Version</label>
                <igx-prefix>
                    <span class="bio-prefix">With</span>
                </igx-prefix>
                <igx-select-item *ngFor="let item of versions" [value]="item.id">
                    {{item.createdDateTime | date:'M/dd/yyyy HH:mm'}} v.{{item.version}}
                </igx-select-item>
            </igx-select>
            <button [hidden]="!hideShowVersion" (click)="toggleVersions()" igxButton="outlined"
                igxButtonBackground="#ffffff" igxButtonColor="#FE4960" [displayDensity]="'compact'">
                <igx-icon fontSet="material">close</igx-icon>&nbsp;Close
            </button>
            <igx-grid-toolbar-advanced-filtering *ngIf="allowAdvancedFiltering">
            </igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-hiding *ngIf="columnHiding"></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-pinning *ngIf="columnPinning"></igx-grid-toolbar-pinning>
            <igx-grid-toolbar-exporter *ngIf="exportCsv || exportExcel " [exportCSV]="exportCsv" [exportExcel]="exportExcel">
                {{exportText}}
                <span excelText>{{exportExcelText}}</span>
                <span csvText>{{exportCsvText}}</span>
            </igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>`

[hanastasov]

@amitmoondra, I used the html as-is, also played around a bit with it, and couldn't reproduce the behavior from the video in neither way. Would it be possible for you to share more details around the sample (the whole grid markup and css, and code, specifically if any click events on the toolbar are used) ? Ideally you would send us an isolated running sample that we can use for investigation, I would be very glad if you could do it. It will also speed-up our response time significantly.

Looking forward to hearing from you.

[amitmoondra]

I will try and do that, a little busy due to work. But i will try and do that during weekend.

[Timmeeeey]

@hanastasov I have the same problem. I could reproduce this by setting ChangeDetectionStrategy.OnPush. https://stackblitz.com/edit/github-sk5rte

[amitmoondra]

@hanastasov I have the same problem. I could reproduce this by setting ChangeDetectionStrategy.OnPush. https://stackblitz.com/edit/github-sk5rte

you can use this in your scsss / css

igx-grid-toolbar-hiding {
    .igx-column-actions {
      display: none !important;
    }
  }

this will solve your issue, i found it out myself. @hanastasov i think you guys should handle the issue from your end without the workaround i figured.