Columns.render css not being applied in angular 6

vaibhav311

I'm trying to add 2 buttons inside a cell using column.render property in my app component.
But i'm not able to apply style to these elements using the styles in app.component.css file.
Here's my code :
Table options:

    columns: [{
    title: 'Name',
    },
    {
    title: 'Type',
    },
    {
    title: 'Dataset',
    },
    {
    title: 'Action',
    render: function(data: any, type: any, full: any) {
    return '<button class="cf_btn_view">View</button><button class="cf_btn_delete">Delete</button>';
    }
    }
    ]

**CSS file:**
    .cf_btn_view {
          background-color: #31D782;
      }
    .cf_btn_delete {
     background-color: #ff0000;
 }

As you can see i'm adding the class in my render function and css styles in my css file. But the styles are not getting applied to the buttons as expected (even through i can see that the button do get those classes after render). Whats the issue here?

P.S. This is my first post and i'm not able to get the code editor to work in this forum's editor. Sorry for the unformatted code.

colin

Hi @vaibhav311 ,

Yep, that should work, and does for me, see here.

We're happy to take a look if you could modify that example to demonstrate the problem,

Cheers,

Colin

vaibhav311

I'm defining the colums inside dt.options in ngOnInit inside my app.component.ts. Is there any reason this might be the issue?

kthorngren

You might have a CSS setting that is overriding what you are trying to set. You can use your browsers inspect to see how the CSS is being applied to your buttons. This is a CSS issue specific to your configuration. A link to your page or a test case replicating the issue is needed to help troubleshoot.

Kevin

vaibhav311

Solved. It was an issue related to angular not adding css style to dynamically added elements. Adding encapsulation: ViewEncapsulation.None to my @component definition solved it. Like this:

@component {
...
encapsulation: ViewEncapsulation.None
}