Ngx-datatable: Incorrect forced column mode header width calculation

[achimha]

I'm submitting a ...

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
When setting headerHeight to auto, I get the desired header height, better than having to come up with a fixed pixel value. When using this together with columnMode="force", the width calculation of the header row is incorrect starting at a certain width (here 1200px) and the column flows to the next line.

Expected behavior
The header row should have the same width as the body row and the header cells fit like the body cells.

Reproduction of the problem
http://plnkr.co/edit/RFI21xSDys85bOv7EF0a

Steadily increase the width of the table until the header columns start to wrap into two lines.

• Table version: 0.7.x
  5.0.0

• Angular version: 2.0.x
  2.4.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X
  All browsers

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TS

[amcdnl]

I did not see this in your demo, will need to dig in to see whats going on.

[litzebauer]

I am having this same issue and I also see it in @achimha demo when the width is greater than 838px in Chrome and Firefox.

[Tixinoo]

I have the same issue... Does someone have a way to fix that ?

[Tixinoo]

For me, it is not because of a width 'greather than' _n_, but width of the header is wrong when the width of the parent div is not defined in px.

For example:

<div style="width:1600px;">
   <ngx-datatable ...> </ngx-datatable>
</div>

--> It is OK (as you can see in the next screen)

But, if I have:

<div style="width:100%;">
   <ngx-datatable ...> </ngx-datatable>
</div>

--> It is not OK (as you can see in the next screen)

I have really no idea how to fix that... Can someone help me please? ( @achimha @amcdnl @litzebauer )