Datatables Responsive collapsing lowest responsive priority on Firefox

enielson1014

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!

kthorngren

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

enielson1014

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 "

" + data +"

";
},
width:'25%',
targets:0
},
{
render:function (data,type,full,meta) {
return"

"+data+"

"
},
width:'25%',
targets:1
},
{
render:function (data,type,full,meta) {
return"

"+data+"

"
},
width:'5%',
targets:2
},
{
render:function (data,type,full,meta) {
return"

"+data+"

"
},
width:'10%',
targets:3
},
{
render:function (data,type,full,meta) {
return"

"+data+"

"
},
width:'10%',
targets:4
},
{
render:function (data,type,full,meta) {
return"

"+data+"

"
},
width:'15%',
targets:5
},
{
render:function (data,type,full,meta) {
return"

"+data+"

"
},
width:'10%',
targets:6
},
{
orderable: false,
targets: "no-sort",
},
{ "targets": [2,3,4,5], "searchable": false }
],

    "dom": 'l<"toolbar">frtip',

})

kthorngren

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

enielson1014

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?

enielson1014

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');
},