1. Feedback
  2. Angular
  3. 9467

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Conflict between Syncfusion Grid and Syncfusion Report Designer styles

I would like to report the following issue and ask if there is a workaround for the problem.

We are using the Syncfusion Grid and the Syncfusion Report Designer as embedded components in our Angular application.


The style sheets for the Report Designer are included in our global Angular.json file (See attached Angular.Json.png)


Having report styles included globally causes pages with a Syncfusion Grid to have style problems. 


This is a grid page that looks correct,
without report styles included:  (Grid Working.png)

This is what the same grid page looks like when report styles are included: (Grid with Issues.png)

This is the HTML for the grid component page:  (Grid.png)

This is the HTML for the Report Designer page:  (Report Designer.png)


I have tried removing the Report styles from the global Angular.json file and including them only in the page with the embedded report designer, but that did not work.  Here are the results of that test:


This is the Report designer page SCSS file:  (TEST Component SCSS.png)

This is the component typescript file with ViewEncapsulation.Native: (TEST View Encapsulation.png)

This is the error thrown by the Syncfusion Report Designer component:  (TEST Designer Issue.png)