Datatables Responsive collapsing lowest responsive priority on Firefox
Datatables Responsive collapsing lowest responsive priority on Firefox
enielson1014
Posts: 4Questions: 1Answers: 0
Hi,
I'm using the responsive plugin and it works great on chrome and Safari, but on Firefox the lowest responsive priority column is collapsed on the page load no matter the size of the page. Per other questions, I set the width of the table to 100%, but it doesn't fix the problem.
Any help would be appreciated!
Thanks!
This discussion has been closed.
Answers
This example seems to work in both Chrome and Firefox:
https://datatables.net/extensions/responsive/examples/column-control/columnPriority.html
Does it work for you in Firefox?
Kevin
It doesn't work for me in Firefox. It hides the lowest responsivePriority.
Below is my datatable config:
var table=$('#gallery_table').DataTable({
"pagingType": "numbers",
responsive:true,
columns: [
{ responsivePriority: 1, targets:0 },
{ responsivePriority: 3, targets:1 },
{ responsivePriority: 7, targets:2 },
{ responsivePriority: 6, targets:3 },
{ responsivePriority: 5, targets:4 },
{ responsivePriority: 2, targets:5 },
{ responsivePriority: 4, targets:6 }
],
"search": {
"smart": false
},
"oLanguage": {
"sLengthMenu": '<select name="show-entries" id="show-entries" style="margin-bottom: 1rem;">'+
'<option value="2">Show 2</option>'+
'<option value="10">Show 10</option>'+
'<option value="20">Show 25</option>'+
'<option value="30">Show 50</option>'+
'<option value="40">Show 100</option>'+
'</select>',
"oPaginate": {
"sPrevious": '<i class="fas fa-angle-left"></i>',
"sNext": '<i class="fas fa-angle-right"></i>',
}
},
"ordering": true,
columnDefs: [
{
render: function (data,type,full,meta) {
return "
";
},
width:'25%',
targets:0
},
{
render:function (data,type,full,meta) {
return"
"
},
width:'25%',
targets:1
},
{
render:function (data,type,full,meta) {
return"
"
},
width:'5%',
targets:2
},
{
render:function (data,type,full,meta) {
return"
"
},
width:'10%',
targets:3
},
{
render:function (data,type,full,meta) {
return"
"
},
width:'10%',
targets:4
},
{
render:function (data,type,full,meta) {
return"
"
},
width:'15%',
targets:5
},
{
render:function (data,type,full,meta) {
return"
"
},
width:'10%',
targets:6
},
{
orderable: false,
targets: "no-sort",
},
{ "targets": [2,3,4,5], "searchable": false }
],
})
I placed part of your code in this example:
http://live.datatables.net/yukigupo/1
When I open the page all columns are shown in Firefox on the Mac. If I reduce the page size to force responsive then the "Office" column is first to be hidden. Reloading the page the "Office" column is still hidden. But when the page shouldn't be responsive the "Office" column appears. The example table has 6 columns not 7 as you code has so I removed the 7th column. Does this example work for you?
If so maybe you can update it to show the issue.
If not then please provide the specifics (version and platform) that doesn't work.
Kevin
Thank you for your help, but unfortunately this isn't working for me. The datatable I have is in a div element with a max-width. Could this affect the percentages of each column in Firefox?
My apologies, I must have been adding the width:100% incorrectly as that did work to solve my problem in Firefox. That did mess up the look of the columns on Chrome so I had to add min-widths to columns in the datatable: 'createdRow': function(row, data, dataIndex){
$('td:eq(0)', row).css('min-width', '400px');
$('td:eq(1)', row).css('min-width', '200px');
$('td:eq(5)', row).css('min-width', '200px');
$('td:eq(6)', row).css('min-width', '200px');
},