New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mvalim opened this Issue Jun 27, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@mvalim
Contributor

mvalim commented Jun 27, 2017

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

@RichAyotte

This comment has been minimized.

Show comment
Hide comment
@RichAyotte

RichAyotte Jul 4, 2017

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
}

RichAyotte commented Jul 4, 2017

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
}
@paxpelus

This comment has been minimized.

Show comment
Hide comment
@paxpelus

paxpelus Jul 20, 2017

I can confirm that this error is reproduced on v0.14

paxpelus commented Jul 20, 2017

I can confirm that this error is reproduced on v0.14

@ssuess

This comment has been minimized.

Show comment
Hide comment
@ssuess

ssuess Aug 19, 2017

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?

ssuess commented Aug 19, 2017

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?

@ssuess

This comment has been minimized.

Show comment
Hide comment
@ssuess

ssuess Aug 19, 2017

Nevermind, I forgot to run quasar build before running the emulator. All good, the fix works!

ssuess commented Aug 19, 2017

Nevermind, I forgot to run quasar build before running the emulator. All good, the fix works!

@paxpelus

This comment has been minimized.

Show comment
Hide comment
@paxpelus

paxpelus Aug 23, 2017

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?

paxpelus commented Aug 23, 2017

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?

@rstoenescu

This comment has been minimized.

Show comment
Hide comment
@rstoenescu

rstoenescu Aug 23, 2017

Member

Yes, it will be fixed. Just got a huge pile of todos at the moment. Just disable PurifyCSS for the moment.

Member

rstoenescu commented Aug 23, 2017

Yes, it will be fixed. Just got a huge pile of todos at the moment. Just disable PurifyCSS for the moment.

@rstoenescu

This comment has been minimized.

Show comment
Hide comment
@rstoenescu

rstoenescu Oct 20, 2017

Member

No longer an issue in v0.15 datatable revamp.

Member

rstoenescu commented Oct 20, 2017

No longer an issue in v0.15 datatable revamp.

@rstoenescu rstoenescu closed this Oct 20, 2017

@rstoenescu rstoenescu added this to the v0.15 milestone Oct 20, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment