Ngx-datatable: [flexGrow]="1" [maxWidth]="30" - maxWidth applied only in header cell;

Created on 13 Mar 2017  路  5Comments  路  Source: swimlane/ngx-datatable

I'm submitting a ... (check one with "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
[flexGrow]="1" [maxWidth]="30" - maxWidth applied only in header cell

Expected behavior
[maxWidth] should be applied only all column cells

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Table version: 0.6.3

  • Angular version: 2.4.8

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

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

Investigate

Most helpful comment

Just want to let you know, I was able to get around this bug by applying [maxWidth] and [width] to the column...

All 5 comments

The same situation when set [scrollbarH]="true" for table and [maxWidth]="100" for column (table have [columnMode]="'force'").

Any updates to this? I'm only able to change the header Column with maxWidth on my table. I am using column and row templates.

Just want to let you know, I was able to get around this bug by applying [maxWidth] and [width] to the column...

@eyev, I just tried your solution. It did not work for me. Also, I don't understand why that would have an effect as the API docs for width show a default value of 150.

Here are the specifics of my table. I've deleted all unrelated properties from my example here, including inner content of columns. I am using material theme, and added a border around the cells to clearly indicate the problem.

<ngx-datatable
        class="material"
    [columnMode]="'flex'"
    [draggable]="false"
    [headerHeight]="48"
    [rowHeight]="'auto'">

    <ngx-datatable-column
        [draggable]="false"
        [minWidth]="63"
        [resizeable]="false">
    </ngx-datatable-column>

    <ngx-datatable-column
        [draggable]="false"
        [flexGrow]="2"
        [resizeable]="false">
    </ngx-datatable-column>

    <!-- The column giving me grief -->
    <ngx-datatable-column
        [draggable]="false"
        [flexGrow]="4"
        [maxWidth]="400"
        [resizeable]="false">
    </ngx-datatable-column>

    <ngx-datatable-column
        [draggable]="false"
        [flexGrow]="1"
        [resizeable]="false">
    </ngx-datatable-column>

    <ngx-datatable-column
        [draggable]="false"
        [flexGrow]="1"
        [resizeable]="false">
    </ngx-datatable-column>
</ngx-datatable>

image

+1

Was this page helpful?
0 / 5 - 0 ratings