Ngx-datatable: styles not working with ionic 3

Created on 20 Jan 2018  路  2Comments  路  Source: swimlane/ngx-datatable








I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I am trying to use the library with my ionic app. The styles are not coming up as in demo's. none of the styles are coming up
screen shot 2018-01-20 at 11 39 35 am

Expected behavior

screen shot 2018-01-20 at 11 40 06 am

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Table version: 0.8.x

  • Angular version: 2.0.x

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

Most helpful comment

Hey @praveens96, I am also using ngx-datatable with Ionic. I had some difficulties linking the stylesheets but got it working in the end.

This is what I have in my 'src/app/app.scss' file:

@import '../assets/styles/ngx-datatable/index';
@import '../assets/styles/ngx-datatable/material';
@import '../assets/styles/ngx-datatable/bootstrap';

You need to rename the css files to .scss and prepend an underscore for Sass to import these files. For example in my ngx-datatable folder (under assets/styles) my files are called:

_index.scss
_material.scss
_bootstrap.scss

Hope this helps!

All 2 comments

Hey @praveens96, I am also using ngx-datatable with Ionic. I had some difficulties linking the stylesheets but got it working in the end.

This is what I have in my 'src/app/app.scss' file:

@import '../assets/styles/ngx-datatable/index';
@import '../assets/styles/ngx-datatable/material';
@import '../assets/styles/ngx-datatable/bootstrap';

You need to rename the css files to .scss and prepend an underscore for Sass to import these files. For example in my ngx-datatable folder (under assets/styles) my files are called:

_index.scss
_material.scss
_bootstrap.scss

Hope this helps!

The same issue I faced while working with Angular (not ionic).
Even after doing that, it didn't work for me.
I had to use class='material' on the ngx-datatable element in the markup. Try adding it.
Hope it helps!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

devendraYebhi picture devendraYebhi  路  3Comments

lautarobock picture lautarobock  路  3Comments

WA-WilliamKrieg picture WA-WilliamKrieg  路  3Comments

dinvlad picture dinvlad  路  3Comments

rotemx picture rotemx  路  3Comments