Columns Squish together under certain conditions

[matthewbrozen]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
I have a angular 4 application that uses angular material mat tabs to display multiple ngx-datatables. Sometimes when I go from tab to tab under certain conditions the tables columns get squished together but when I open the google developer tools to inspect it the table fixes itself

Expected behavior
The expected behavior is that the columns display in their proper format and don't get squished together

Reproduction of the problem

This is a large project and I am not able to recreate the issue in plunker but I have attached the image of the bug. This occurs with angular material 2.0.0-beta.12 mat-tabs.

What is the motivation / use case for changing the behavior?
To properly display the data

Please tell us about your environment:

OS X El Capitan version 10.11.6

Atom IDE

NPM 4.3.0

angular/cli 1.4.9

swimlane/ngx-datatable 9.3.1

Chrome

• Table version: 0.8.x

swimlane/ngx-datatable 9.3.1

• Angular version: 2.0.x

angular/core 4.2.4

• Browser:

Chrome

• Language:

Typescript

[mcblum]

I've seen this same thing when the screen changes sizes and there's a table that's still in the dom but out of view because of tabs or something. What happens if you remove the table and then put it back when the view switches back?

[arlowhite]

I have a similar issue after upgrading from 11.0.4 to 11.1.5
However, for me the header columns are squished but the body is normal. This may be because I set the columns first, and then later set the data.
The header columns layout correctly once I scroll the table.

[arlowhite]

Inspect the <div> around <datatable-header-cell> with class="datatable-row-center"
During the bug, it has width: 0px; After scrolling, the width gets a value.

[arlowhite]

Another similar issue is that when I pin a column, it is "squished" until I scroll (vertically or horizontally).

[padilla-jm]

I had the same issue after upgrading to 11.1.5

[olaf89]

Same here, had to pin 11.0.4.

[mcblum]

Does this have anything to do with #1161? We've been struggling with that.

[Logic-Bits]

Just wanna push this, happens here too.
BTW, using it inside of a Material Tab.

[kuhlschrank]

Same here. Issue occurs since updating from 11.0.4 to 11.1.7.
I'm not using the datatable inside a material tab.
Column mode is set to fixed and width values are applied correctly to the style attribute.

Headers and columns are squished as shown in the original post's screenshot.

EDIT: "Sometimes" only the headers get squished. Data columns are fine.
Also: When I start scrolling - everything squished is immediately resized correctly.

[darkurse]

Same here, only a windows resize corrects it (i'm in force column mode). In my case only headers are squished, data is ok.

However, I think I got to the bottom of this and made a PR which hopefully fixes the header issue.

For a quick fix and see if it works for you, go to file @swimlane/ngx-datatable/src/components/header/header.component.ts line 103. Basically at the end of the @Input() set columns() property and add the line this.setStylesByGroup(); at the end.
Let me know if this works for you ?!

[jkon]

I am having this issue too. I change the set of columns in my tables a lot, so having the recalculation of the column widths (including in the headers) work correctly is important to me.

[kumaranish8888]

Well I found a temporary solution to this one. I receive the table data in the setTimeout giving it a minimal time of 100 ms. Now it stays squished for like 100ms and gets back to normal, you won't even realize that it was squished at any moment. I know this is not a perfect solution but glad I have something that is working fine and I didn't had to deal with version change.

[witheroux]

This would happen to me on activate on a row or initial loading of a table. This only happened when I had two tables with the same columns object and one of the two tables was hidden making the browser report a width of zero on the column I suppose. I didn't dive into the code to see where this happened or why but hopefully this can help someone.

Made a stackblitz to illustrate the issue. Resize to have the first table "re-appear" and then do something to toggle a row's activate event and the tables will squish back to zero.

[PLopezD]

+1 -- for me it's when users go from smaller window to max size. Resize just doesn't fire

[gpessa]

Same issue here

[arturtupiassu]

+1

[la-jamesh]

Can confirm this is still a very real thing. If you have two tables tabs of that hide the table they contain. if you resize and jump back and forth there is some crazy behaviour going on. I'd be happy to put in a PR if an experienced dev could point me towards the table resizing logic.

[V-Mario]

+1

[koderi-dp]

Same issue...

[brandonyoung]

+1

[hensleyrob]

+1

Any update on this? May have to switch to a different data table if this doesn't get figured out as it's killing or UI currently.

[duck74]

+1
I might have the same issue. I am reusing a datatable component in a modal and when I have resized the browser window before (does not matter, if there was another datatable on it or not) then the contents of the table, when I open it, gets squished to the left. When I resize the window again, it jumps back to looking fine.

[koderi-dp]

when we can expect this pull request #1561 in master?

[donnalmh]

Hi, Just to bump up on this, am still experiencing it. is there a fix for this? Thanks

[koderi-dp]

I think you should switch to primeng...

[jarodsmk]

I just experienced this with a custom component rendering my <ngx-datatable> through content projection (by using <ng-content>)

If the datatable has it's inputs populated, but the parent component only renders it's body afterwards, this could occur.

Fixed by firing a window resize event, and writing the relevant unit test, but since this project isn't maintained much any more - if anyone has severe issues with this, might be worth investigating using a more supported datatable library, primeng or ag-grid to name some.

Unless...
@marjan-georgiev - is there any chance of someone being assigned to this project to attend to/review the open PRs that may resolve the issues open & allow more open source contribution & interaction?

[azeay]

On Init just invoke the resize event
//javascript
window.dispatchEvent(new Event('resize'))
This works fine with me

[pgqueme]

Trying everything I could think of, adding this CSS to my global styles seems to work so far:

datatable-body-cell.datatable-body-cell {
    width: -webkit-fill-available !important;
}

[Arti3DPlayer]

+1

[jcandiap]

Did anyone manage to solve this? 😂

[Arti3DPlayer]

@jcandiap I migrated to Angular material tables too

[grantwforsythe]

I solved this by setting the column mode to flex, setting [flexGrowth]="1" for each column, and fixing the position of .datatable-header-inner

.datatable-header-inner {
  position: fixed;
}