I recently updated from 8.2.1 to 8.2.6 and immediately noticed that on any data-tables that I have responsive: true enabled, even before the need for the responsive feature to kick in, all rows have the + icon. Usually, this icon only appears when responsive kicks in. I've tracked this down to an issue in the plugins.bundle.css file. I compared 8.2.6 with 8.2.1 and saw that there are some missing lines.
This is what is currently in 8.2.6 plugins.bundle.css
.dtr-control:before {
border: 0 !important;
height: 1.35rem;
width: 1.35rem;
line-height: 1.5;
text-indent: -999px !important;
margin-bottom: -0.3375rem;
margin-right: 0.675rem;
display: inline-block;
position: relative;
font-size: 1.05rem;
border: 0;
box-shadow: none;
mask-size: 85%;
-webkit-mask-size: 85%;
content: ' ';
}
Whereas in 8.2.1 it was
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column.collapsed > tbody > tr > th.dtr-control:before {
border: 0 !important;
height: 1.35rem;
width: 1.35rem;
line-height: 1.5;
text-indent: -999px !important;
margin-bottom: -0.3375rem;
margin-right: 0.675rem;
display: inline-block;
position: relative;
font-size: 1.05rem;
border: 0;
box-shadow: none;
mask-size: 85%;
-webkit-mask-size: 85%;
content: ' ';
}
By overwriting the 8.2.6 CSS class listing with what was previously there in 8.2.1 the bug goes away.
Can someone verify and validate this? And if it is the case can a patch be pushed to correct this? I hate the idea of needing to make changes to the plugins.bundle.css file. Usually, I would overwrite classes from metronic in my own CSS files if needing to change the default behavior, but this is one of those cases when overwriting doesn't seem to work.
Hi,
Good spot. We will provide the fix in the next v8.2.7 update.
In the meantime, you can do a quick fix by changing the sass file src/sass/vendors/plugins/_datatables.scss
's below CSS selector from
// Responsive
.dtr-control {
}
// Responsive
.dataTable.collapsed .dtr-control {
}
Thanks for responding, and thanks for the quick fix.
Hi ,
I am glad to heal you. If you need any further help please do let us know.
Regards,
Sean