Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(