CSS Problem

[Mochoa92]

Hi,

already have a issue with the style, look

i can´t see the grid, and the checkboxs looks bad

[Mochoa92]

i followed this steps

https://akveo.github.io/ng2-smart-table/#/demo

[karangarg45]

Hey there create a new scss file for the component you are using ng 2 smart table in and then define this scss and everything will be back to normal

$table-font-color: #606c71;
$table-border-color: #e9ebec;

:host{
   /deep/ { 
       *{
       font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;    
       }

       table{
        color: $table-font-color;  
        tr {
            td,th{
               border: 1px solid $table-border-color; 
            }
        }
       }
   }
}

[KulikovskyIgor]

Hi, I faced the same problem. I can not override tables' styles

[Mochoa92]

@KulikovskyIgor, I have solved this problem by editing the bootstrap.min.css file, editing the elements td, tr, i did it comparing the css of this table: https://akveo.github.io/ng2-smart-table/#/, with mine.

One of the aggregate lines: .table>tfoot>tr>td{border: 1px solid #e9ebec;}

sorry for my bad english.

best regards.

[KulikovskyIgor]

@Mochoa92 thanks for your respond. It helped me too

[FabrizioRicciarelli]

To style this component it's a real pain in the ...

All the suggestions given in the various issues don't drive to an easy-to-implement solution!

It is unbelievable!

I've tried to alter the "attr" element of the "settings" attribute and it doesn' work:

    private settings = {
        defaultStyle: false,
        attr: {
        class: 'mat-table' // this is custom table scss or css class for table
        },
        columns: {
        ...
        }
    }

I've tried to add a new CSS source (in my app.module.ts), where the override clause "!important" have been set for each of the characteristic/attribute I need, but it doesn't work:

@Component({
    selector: 'app',
    styleUrls: [
        '../../css/styles.css'/ 
        '../../css/ng2-smart-table.css' // contains the overriding classes
})

I've tried to override the style through the "styles" attribute, directly inside the component module of the page/view, and it doesn't work:

@Component({
    selector: 'myComponent',
    templateUrl: '../../Views/MyView.cshtml',
    moduleId: module.id,
    styles: [`
        $table-font-color: #606c71;
        $table-border-color: #e9ebec;
        :host{
                /deep/ { 
                        *{
                                font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;    
                        }

                        table{
                                color: $table-font-color;  
                                tr {
                                        td,th{
                                                border: 1px solid $table-border-color; 
                                        }
                                }
                        }
                }
        }
    `]
})

This issue is widely spanned across all the elements: the table itself, the pagination, the sorting.

Can someone, PLEASE, publish a WORKING detailed guide on how to apply an external set of STANDARD CSS to alter/override some or all elements of this object?

In that guide, PLEASE, list ALL the class names, which are the "default" values, how to access them and, if possible, a list of all the ng2-smart-table's methods: the current documentation doesn't explain them all.

I'm using Angular 5 and Visual Studio 2017.

Thank you so much in advance

[srinivasmerugu]

After a long frustration towards styles i am able to override the ng2-smart-table styles . Below worked for me . settings: { defaultStyle: false, attr: { class: 'table table-bordered table-striped' // this is custom table scss or css class for table }}

Able to add custome css as below , here customeStyle is a class name can use inside the settings object

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

  padding: 10px;
  }

[jobnte]

@srinivasmerugu Thanks. It worked.

[ovidiubarbu]

I struggled a bit with this too. I was getting no grid and was quite annoying. Here what worked for me. I have added this into the css file for my component. I hope this helps:

:host /deep/ ng2-smart-table table{
    border-style: inset;
    border-color: initial;
    border-image: initial;
    border-width: 2px;
    
    display: table;
    border-spacing: 2px;
    border-color: grey; /* border of the big table*/

/* grid lines */
:host /deep/ ng2-smart-table table > tbody > tr > td {
    box-sizing: border-box;
    border: 1px solid grey;
}

/* headers grid color*/
:host /deep/ ng2-smart-table thead > tr > th  { 
    border: 1px solid grey;
    background-color:#673ab7;
}  
/*font size*/
:host /deep/ ng2-smart-table {
    font-size:16px;
}

[binhnv5]

I use ng2-smart-table with multiselect and checkbox look bad. I write .css:

:host ::ng-deep ng2-smart-table{ .table > tbody > tr > td:first-child{ .input[type="checkbox"]{ height: 5px; } } }

[eddyizm]

:host ::ng-deep seems to be the most current solution.