Original report: http://forum.quasar-framework.org/topic/493/q-data-table-responsive-columns-break-when-in-dist-mode-though-work-perfect-in-debug
Quasar: beta 0.14
OS: Windows 8.1
Node: 6.9.11
NPM: 3.10.9
Browsers: Chrome 58.0.3029.110 (64-bit)
Android: 7.0
q-data-table: responsive columns break when in dist mode though work perfect in 'dev', demonstration of the bug https://gist.github.com/mvalim/bf96afd7250591be8c07f354d9da567d
It should render the same in both versions
Just build the app
Digging a little deeper I've found that the bug is related to the purifycss step in the build script, when I removed it, the build worked as expected
I can confirm this. Thanks for the tip about purifycss. It'll give it a try and report back.
EDIT:
Disabling purifyCSS fixed the problem.
In case anyone is trying to figure out where to do that. Open config/index.js and set the purifyCSS property to false in the build section.
build: {
env: prodEnv
, index: path.resolve(__dirname, '../dist/index.html')
, productionSourceMap: false
, publicPath: ''
// PurifyCSS breaks data table responsiveness
// @see http://forum.quasar-framework.org/topic/493/q-data-table-responsive-columns-break-when-in-dist-mode-though-work-perfect-in-debug
, purifyCSS: false
}
I can confirm that this error is reproduced on v0.14
I set purifyCSS to false, then ran npm install again. But then when I ran the cordova emulator, it still showed unresponsive for the data table. Is there anything else I need to do?
Nevermind, I forgot to run quasar build before running the emulator. All good, the fix works!
This issue is reproduced on version 0.14.1 on a production webpage (I have not tested on cordova but I expect the same problem)
Is there a plan to fix this on next version?
Yes, it will be fixed. Just got a huge pile of todos at the moment. Just disable PurifyCSS for the moment.
No longer an issue in v0.15 datatable revamp.
Most helpful comment
No longer an issue in v0.15 datatable revamp.