Metronic 8.X Datatable Responsive Table Data Display Misalignment
Such behavior does not happen on Metronic 7.X where the table data is aligned correctly and does not display table data below table header on datatable responsive mode.
Example for Metronic 7.X (Expected behavior, much tidy and pretty layout)
https://imgur.com/a/WAuvXNe
Example for Metronic 8.X (table data displaying below table header, and does not behave like Metronic 7.X datatable responsive):
https://imgur.com/a/x30LLyd
Would like to request Metronic team to amend such changes to the datatable. â¤
Replies (3)
Hi,
Thank you for the heads-up. We will fix this in the next update.
In the meantime, you can add the below hotfix on your end in src/sass/vendors/plugins/_datatables.scss:
// Child details
.dtr-details {
li {
display: flex;
}
}Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Could you please try it and let us know the result?
Regards.
Your Support Matters!
Hi Sean,
Thanks for the prompt response! 
Attempted to use Gulp to generate the new assets but unfortunately that does not work for me, however, I attempted to add custom css below to overwrite the existing style.bundle.css and it works for me.
.dtr-details > li {
display: flex;
}Hope it helps anyone who encounter it and looking for a solution. â¤
Hi Seng ,
Glad to hear that you managed to get it working. Is the next update this issue will be fixed in the global plugins.css bundle.
All the best with your projects!
Regards.
