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)