We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to detect the css class in dashboard?


I am trying to set the css for different objects within the panel object. The documentation shows how this works with static html, but in my scenario it can't.(because draggable& remembering state).
I tried to do something as simple as the following for testing purposes:

.change {
  text-align: center;
  color: red;


  cellSpacing: number[] = [10, 10];
  aspectRatio: any = 100 / 80;
  panels: PanelModel[] = [
    { "sizeX": 2, "sizeY": 1, "row": 0, "col": 2, content: '<div class="change">1</div>' },

But this doesn't change anything. The class can't be found from within the component?

Tried the following:
    { "sizeX": 2, "sizeY": 1, "row": 0, "col": 2, cssClass: 'change', content: '<div class="content>"<div class="change">1</div></div>' },
    { "sizeX": 2, "sizeY": 1, "row": 0, "col": 2, cssClass: 'change', content: '<div class="change">1</div>' },

Am i missing something?



3 Replies

CI Christopher Issac Sunder K Syncfusion Team May 31, 2019 01:51 PM UTC

Hi Laurens, 
We checked your reported query – “Not able to set css for objects within the panel” from our end and were able to set the css for panel contents both using cssClass class property and content’s class. Please find the code snippet below, 
public panels: any = [ 
    { "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, cssClass: 'change', content: '<div class="content">0</div>' }, 
    { "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, cssClass: 'change', content: '<div class="content">1</div>' }, 
    { "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, cssClass: 'change', content: '<div class="content">2</div>' }, 
    { "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, cssClass: 'change', content: '<div class="content">3</div>' }, 
    { "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, cssClass: 'change', content: '<div class="content">4</div>' }, 
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, cssClass: 'change', content: '<div class="content">5</div>' }, 
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, cssClass: 'change', content: '<div class="content">6</div>' } 
// Custom styles set based on cssClass 
.change { 
  text-align: center; 
  color: red; 
// Custom styles set based on panels content’s class 
.content { 
  vertical-align: middle; 
  font-weight: 600; 
  font-size: 20px; 
We have prepared a sample for your reference below, 
We suspect you might be facing issue due to css file not referred properly in the application. Can you please once ensure this case? 
If issue is still persisting, please get back to us with further details on this issue so that we can check and help you resolve it. 
Let us know if you have any  concerns. 

LA Laurens Albers May 31, 2019 02:47 PM UTC

Based upon your sample, apparently the following has to be added in @Component:

  encapsulation: ViewEncapsulation.None;

Without it the css wont work. That was the only difference apparently.




AB Ashokkumar Balasubramanian Syncfusion Team June 3, 2019 10:20 AM UTC

Hi Laurens, 
Most Welcome. 
We were happy to hear that your reported problem has been resolved in your end. If you remove the ViewEncapsulation.None, the default encapsulation value Emulated is set to the application. So, dynamically created element styles are not applied properly to corresponding component. For this case, we need to specify the styles in separate file (other than app.component.css file and refer it into index.html) or index.html file. Please check the below link. 
Please let us know, if you have any concern on this. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon