Styles not applied to .wj-header.wj-cell and wj-cell

Styles not applied to .wj-header.wj-cell and wj-cell

Posted by: werner.dreyer on 2 July 2019, 11:00 am EST

• 

  werner.dreyer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 July 2019, 11:00 am EST

  In an Angular component, I have a FlexGrid defined as follows:

  ...

  My component-css looks as follows:
  
  .submission-grid{
  
  max-height: 700px;
  
  max-width: 100%;
  
  font-size: 14px;
  
  font-family: Arial, Helvetica, sans-serif;
  
  }

  .submission-grid .wj-header.wj-cell {
  
  background-color:red;
  
  }
  
  .submission-grid .wj-cell {
  
  background-color:blue;
  
  }

  The attachment below shows the result. The properties set in “.submission-grid” are applied, those in “.submission-grid .wj-header.wj-cell” or “.submission-grid .wj-cell” are not. What am I doing wrong?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 3 July 2019, 1:28 am EST

  Hello,

  The reason that styling is not being applied to the cells is that the component’s CSS is only applied to the elements that are in the template and since the .wj-cell and .wj-header elements are created dynamically, the component’s CSS does not affect these elements.

  To resolve this issue, you may move your CSS styles to the global CSS file of the project (mainly styles.css). Please refer to the sample below:

  https://stackblitz.com/edit/angular-c7jebe