Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

There is a bug in Metronic 8 2 6 version regarding datatables responsive feature


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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


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 {
}


to


// Responsive
.dataTable.collapsed .dtr-control {
}


Then recompile your assets with gulp or webpack. In the next update you can update the src easily while you use the quick fix for time being.

if you need any further clarifications please do let us know.

Regards.



Thanks for responding, and thanks for the quick fix.



Hi happy,

I am glad to heal you. If you need any further help please do let us know.

Regards,
Sean


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(