Quasar: q-data-table: responsive columns break when in dist mode though work perfect in 'dev'

Created on 27 Jun 2017  路  7Comments  路  Source: quasarframework/quasar

Original report: http://forum.quasar-framework.org/topic/493/q-data-table-responsive-columns-break-when-in-dist-mode-though-work-perfect-in-debug

Software version

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

What did you get as the error?

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

What were you expecting?

It should render the same in both versions

What steps did you take, to get the error?

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

Most helpful comment

No longer an issue in v0.15 datatable revamp.

All 7 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

green-mike picture green-mike  路  3Comments

slowaways picture slowaways  路  3Comments

jean-moldovan picture jean-moldovan  路  3Comments

jigarzon picture jigarzon  路  3Comments

mesqueeb picture mesqueeb  路  3Comments