how to fix width for columns for correct showing data

shuba_ivan

Him I use version

    "datatables.net": "^1.10.21",
    "datatables.net-autofill-bs4": "^2.3.5",
    "datatables.net-bs4": "^1.10.21",
    "datatables.net-buttons-bs4": "^1.6.3",
    "datatables.net-colreorder-bs4": "^1.5.2",
    "datatables.net-dt": "^1.10.21",
    "datatables.net-fixedcolumns-bs4": "^3.3.1",
    "datatables.net-fixedheader-bs4": "^3.1.7",
    "datatables.net-keytable-bs4": "^2.5.2",
    "datatables.net-responsive-bs4": "^2.2.5",
    "datatables.net-rowgroup-bs4": "^1.1.2",
    "datatables.net-rowreorder-bs4": "^1.2.7",
    "datatables.net-scroller-bs4": "^2.0.2",
    "datatables.net-searchpanes-bs4": "^1.1.1",
    "datatables.net-select-bs4": "^1.3.1",
    "file-loader": "^3.0.1",

and I faced with problem, my content in api has very long width and in data tables this row goes beyond the screen.
I need set some width.. I read the doumentation and try to apply width, turned off "autoWidth": false, and set "width": "20%" in columnDefs and in columns.. then found the same problem in forum and try to implemented recomended solutionm but still not help.
I added css to class hover_menu_table

    <!-- Table -->
    <table id='empTable' class='display dataTable hover_menu_table'>

        <thead>
        <tr>
            {% for column in th_keys %}
                <th scope="col">{{ column }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tfoot>
        {% for column in th_keys %}
            <th scope="col">{{ column }}</th>
        {% endfor %}
        </tfoot>

    </table>

this is my data tables init

 var table = $('#empTable').DataTable({
            "autoWidth": false,
            'responsive': true,
            'fixedHeader': true,
            'processing': true,
            'serverSide': true,
            'serverMethod': 'get',
            'ajax': {
                'url': app_rest_hovermenumanagment_listhovermenu,
            },
            columns: columns,
            "columnDefs": [
                {
                    "width": "20%",
                    "targets": 0,
                    "data": 'CategoryName',
                    "render": function ( data, type, row, meta ) {
                        return type === 'display' ?
                            '<p class="cn_'+row.id+'">'+data+'</p>' : ''
                    }
                },
                {
                    "width": "20%",
                    "targets": 1,
                    "data": 'PositiveKeyWords',
                    "render": function ( data, type, row, meta ) {
                        return type === 'display' && data?
                            '<p class="pkw_'+row.id+'">'+data+'</p>' : ''
                    }
                },
                {
                    "width": "20%",
                    "targets": 2,
                    "data": 'NegativeKeyWords',
                    "render": function ( data, type, row, meta ) {
                        return type === 'display' && data ?
                            '<p class="nkw_'+row.id+'">'+data+'</p>' : ''
                    }
                },
                {
                    "width": "20%",
                    "targets": 3,
                    data: 'Action',
                    render: function ( data, type, row, meta ) {
                        return '    <!-- Button trigger modal -->\n' +
                            '    <button type="button" class="btn btn-primary" data-category-id="'+row.id+'" data-toggle="modal" data-target="#exampleModalLong">\n' +
                            '        Edit\n' +
                            '    </button>';
                    }
                }
            ],
        });

.hover_menu_table {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed; // ***********add this
  word-wrap:break-word; // ***********and this
}

This what I have in api result

my question how to fix width for columns for correct showing data, becuase now I shown only one column CategoryName, other columns shown after click in row in extend window?

shuba_ivan

But I faced with this problem not in all cases. Example if I search some row and this row showing separatly width works correct....

var table = $('#empTable').DataTable({
            "autoWidth": false,
            'responsive': true,
            'fixedHeader': true,
            'processing': true,
            'serverSide': true,
            'serverMethod': 'get',
            'ajax': {
                'url': app_rest_hovermenumanagment_listhovermenu,
            },
            columns: columns,
            "columnDefs": [
                {
                    "width": "10%",
                    "targets": 0,
                    "data": 'CategoryName',
                    "render": function ( data, type, row, meta ) {
                        return type === 'display' ?
                            '<p class="cn_'+row.id+'">'+data+'</p>' : ''
                    }
                },
                {
                    "width": "40%",
                    "targets": 1,
                    "data": 'PositiveKeyWords',
                    "render": function ( data, type, row, meta ) {
                        return type === 'display' && data?
                            '<p class="pkw_'+row.id+'">'+data+'</p>' : ''
                    }
                },
                {
                    "width": "40%",
                    "targets": 2,
                    "data": 'NegativeKeyWords',
                    "render": function ( data, type, row, meta ) {
                        return type === 'display' && data ?
                            '<p class="nkw_'+row.id+'">'+data+'</p>' : ''
                    }
                },
                {
                    "width": "10%",
                    "targets": 3,
                    data: 'Action',
                    render: function ( data, type, row, meta ) {
                        return '    <!-- Button trigger modal -->\n' +
                            '    <button type="button" class="btn btn-primary" data-category-id="'+row.id+'" data-toggle="modal" data-target="#exampleModalLong">\n' +
                            '        Edit\n' +
                            '    </button>';
                    }
                }
            ],
        });

Another example

Looks lke in some case worked in some case not

colin

Odd that it works sometimes, and sometimes not. We're happy to take a look, but there's a lot going on there, so we'd need to see it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin