Vuetable-2: Width for a column?

[coderabsolute]

Is it possible to define the width for a column?

[ratiw]

@coderabsolute Use CSS to do that. See here

[coderabsolute]

Thanks for answering that. Maybe, we should document this somewhere which is easily accessible.

[itelmenko]

Thank you ratiw!

It seems there are not enough css-classes and ids. I can not defined width for columns with a cutting text for cells with long text.

I get incorrect width:

http://joxi.ru/J2bV6gKfXLj112

    table.vuetable {
        width: 1200px;
        table-layout: fixed;
    }

    .vuetable-body > tr > td {
        white-space: nowrap;
        overflow: hidden; /* cutting log text */
        text-overflow: ellipsis; /* adding dots */
    }

    /*
     * Column width
     */

    .vuetable th#__checkbox {
        width: 15px;
    }

    .vuetable th#__sequence {
        width: 15px;
    }

    .vuetable th#_name {
        width: 120px;
    }

    .vuetable th#_email {
        width: 120px;
    }

    .vuetable th#_birthday {
        width: 80px;
    }

    .vuetable th#_address {
        width: 200px;
    }

    .vuetable th#_gender {
        width: 80px;
    }

    .vuetable th#_salary {
        width: 130px;
    }

    .vuetable .vuetable-th-slot-actions text-center {
        width: 70px;
    }

[ratiw]

@itelmenko Inspect it from the browser's devtool. The example is from first version of Vuetable. Vuetable-2 is different and has a lot more.

[itelmenko]

@ratiw I have inspected already. But for "table-layout: fixed;" browser uses first row's cells (not TH) for calculation width of each column...
I tried some settings, but I can not define width of columns if cells has long text.

Also table changes its width when I click sorting or paging.

[ratiw]

@itelmenko I'm not very good at CSS. I just know enough to work with it. For the "table-layout: fixed", can you suggest what would make it work?

The <td> for special fields, already has a class marked for its use.

• __sequence has vuetable-sequence class
• __checkbox has vuetable-checkboxes class

For other fields, you could use dataClass option in field definition to define any class you like.

[itelmenko]

@ratiw, please, try to define width for columns in px (not in percents). And you will see the problem.
Long text must be cut by width of column. But it (width in px + long text) does not work for vuetable-2.
But it works fine in jqGrid.
Please, let me know if you need more details.
Thanks!

[ratiw]

@itelmenko Can you please fork one or both of these code: codepen and/or jsfiddle and try to set the css for the table? It would be easier for me to understand the problem.

[itelmenko]

@ratiw, sorry for delay. Can you add field with long text (about 200-300 symbols) in https://vuetable.ratiw.net/api/users ?
Because this issue is for long text fields.

[cristijora]

You can add some static text and start from there. https://jsfiddle.net/wzk251aq/9/

[itelmenko]

@cristijora, thank you for your jsfiddle
@ratiw , yes, look like it was my mistake. It works fine on jsfiddle https://jsfiddle.net/itelmenko/no35z5kw/1/
I need to debug my code.
Thank your for help!