Grid is collaped inside the tab control

[sudha1981]

Issue: ngx-datatable is collapsed inside the tab control

Step1 : Tabset have different tabs Example : BIOSContnet,SiliconInfo Step2 : when the user clicked on the tab loading the data based tab click.here grid is collapsed but data is binded.

Can please suggest and let me know where it went wrong?

Attached the sample code and issue (image) for your reference.

<tab *ngIf="selected_program_details && selected_program_details.length>0" tabindex="19" (select)="GetChoosenTabData('BIOS')" heading="BIOS Content" id="tabBIOS">

                                <div class="row">
                                    <div class="col-sm-10 col-md-10 col-lg-10">
                                        <fieldset>
                                            <legend> Choose Platform</legend>
                                            <span *ngFor="let item of selected_program_details">
                                                <span *ngFor="let plt of item.Platform.split(','); let i = index">
                                                    <input tabindex="20" type="radio" name="bios_platform" value="{{plt}}"
                                                        [checked]="i==0" (change)="GetBIOSContents(plt)" /> {{plt}}
                                                </span>
                                            </span>
                                        </fieldset>
                                    </div>
                                   
                                </div>

                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-12">
                                        <ngx-datatable class="bootstrap gridcommonheight100" id="ngx-bios" [rows]="build_bioscontents"
                                            [headerHeight]="30" [footerHeight]="30" [rowHeight]="30" [scrollbarV]="true"
                                            [columnMode]="'force'">
                                            <ngx-datatable-column name="Base BIOS" prop="BaseBIOS">
                                            </ngx-datatable-column>
                                            <ngx-datatable-column name="Custom BIOS" prop="CustomBIOS">
                                            </ngx-datatable-column>
                                        </ngx-datatable>
                                        <!-- <ngx-datatable class="bootstrap gridcommonheight100" [rows]="build_bioscontents" [headerHeight]="30" [footerHeight]="30"
                                            [rowHeight]="30" [scrollbarV]="true"  [columns]="bios_columns">                                             
                                        </ngx-datatable>-->
                                    </div>
                                </div>
                            </tab>

[anvial]

The same issue. Any suggestions?

[sudha1981]

The issue is raised nearly 1 year back but no one is replied now. Let me know any one is fixed the issue .It is really urgent

[cyberbobjr]

I fixed temporary this issue with a really awful patch : when i click on a tab, i emit a resize event :

    detectChange() {
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        }, 0);
    }

it's really really bad, but the job is done until a better way

[sudha1981]

Thank you

[leoSanArts]

Same library I have used & was facing same issue recently in my project.

And on Inspect I found that it is regarding CSS i.e. table cells were taking dynamic width randomly (eg: width: 0 or width: 234px.....etc) sometime and that's why it get collapse.

So in my component's CSS file I just override it with below code...

And my issue is solved..!