Expected CSS styles not working

[siddharthaReddy]

Our current application has the requirement to be responsive, so we are using bootstrap 3. App is still in initial stages and all the styles are applied only using bootstrap classes.

Smart-table that has been included using npm install doesn't have the actual/expected styles from demos.

The labels and text outside of table are of font-size 14 px, where as text inside tables is getting computed to 8.75px. Also, table's border-top doesn't appear.

I have tried adding classes to table and then have those classes define styles in module and component based css files but still doesn't apply.

Is there a way to customize the styles for smart-tables ?

Thanks in advance.

[DickRiversDuGettho]

i have the same issue, i don't understand how to apply styles, please, Any explanations.

[vdoolla]

I am also having the same problem while using this smart table with Bootstrap 3 can some please throw light for us to customize the css in order to increase the font of table content

[neo4u]

Any update on this? Were you able to make any CSS customizations?

[stefanofalasca]

Me too same problem

[neo4u]

@stefanofalasca : This was a false alarm for me. I hadn't imported the file to modify the theme correctly.

[vamsyvirureddy]

mee too same problem

[chaouiy]

problem source : default ng2-smart-table style is erasing any post defined css rules. I am forking the repo to comment css file

[vdoolla]

@youneschaoui - Please let us know once you commit the code to repo. Thank you for finding the root cause and willing to fork the fix to the repo.

[Akshaymisal5]

me too same problem

[mat-codehaus]

The issue is most likely that the tr/th style specifies 0.875rem for the font size and Bootstrap 3 by default has a small base font, maybe 10px?

0.875rem means that the font sizes for the table rows and headers with be 0.875x the size of the base/root font - which is small in Bootstrap.

So you can either customise/modify your Bootstrap configuration to a bigger base font size or update the styles for the table rows/headers to be something bigger than 0.875rem.

However, it would be good to be able to override the tr/th values as part of the components configuration.

[a4amitava]

Me too have the same issue . any update or work around please ?

[abhishek3999]

I have also same issue.I am not able to apply extra css to smart table.
I am using @angular/material/prebuilt-themes/indigo-pink.css.
so table is not showing with neat border and aligned.
please answer asap.

[srinikoganti]

Having same problem. Can't apply bootstrap classes for the table. Any solution ?

[DickRiversDuGettho]

No i make my own table Le 11 juil. 2017 4:33 PM, "Srini Koganti" <notifications@github.com> a écrit :

…

Having same problem. Can't apply bootstrap classes for the table. Any solution ? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#112 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARgSesiC6l9aQpEg5IYS9O4Y1mjQKfH7ks5sM4fNgaJpZM4LRVIs> .

[abhishek3999]

the table is designed by using bootstrap.If you have to use or apply css externally for the table then
eg> td{backgroundColor:pink}
th{ font:bold;
} use like this way
Thanks

[davidmartinezros]

Hi!

I migrate the version of angular from 2 to 4 for use the new version of the component.

In my case, the ng2-smart-table component, version ^1.2.2, doesn't show the cell style border.

I have to define any style for showing? Or the styles of the tables changes from the version 0.6.0?

Thanks in advanced,

David

[abhishek3999]

Hi, You have define style by externally in styles.css. Thanks

…

On Sep 28, 2017 4:38 PM, "David Martínez Ros" ***@***.***> wrote: Hi! I migrate the version of angular from 2 to 4 for use the new version of the component. In my case, the ng2-smart-table component, version ^1.2.2, doesn't show the cell style border. I have to define any style for showing? Or the styles of the tables changes from the version 0.6.0? Thanks in advanced, David — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#112 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Abh1CPJ_wSf_1Hgx9of9Te9ktoSLIb-1ks5sm34igaJpZM4LRVIs> .

[ankypant]

use below configuration in the setting object

attr: {
class: 'table table-bordered'
},

and

:host /deep/ ng2-smart-table {
font-size: 16px;
}

eg .
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
},
attr: {
class: 'table table-bordered'
}
};

[DarioN1]

I have the same problem, do you have any updates ?