how to fix width for columns for correct showing data
how to fix width for columns for correct showing data
shuba_ivan
Posts: 8Questions: 4Answers: 0
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?
This discussion has been closed.
Answers
But I faced with this problem not in all cases. Example if I search some row and this row showing separatly width works correct....
Another example
Looks lke in some case worked in some case not
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