Report Viewer in shadow DOM

[noob]

I have a Blazor server web app where I render reports in StiReportViewer, and I want to render them inside the Shadow DOM to prevent parent CSS from affecting the viewer, essentially creating a pure standalone report view within my app.

is there any idea or implementation?

Thanks.

[Max Shamanov]

Hello.

We would need more time to get an answer for you.
We will let you know as soon as we have any results.

Thank you.
#19612

[Max Shamanov]

Hello,

We don't have a ready-made solution, but we recommend using IFRAME for this purpose, as it is the most reliable and cleanest method.
If this is not possible in your project, you can try CSS sandboxing, i.e. create a div with the .viewer-sandbox style and reset all basic styles:

Code: Select all

<div class="viewer-sandbox">
   <StiBlazorViewer Report="@Report" />
</div>
.viewer-sandbox {
  all: initial;
  display: block;
  box-sizing: border-box;
}

.viewer-sandbox * {
  all: revert;
  box-sizing: border-box;
}

However, this method will be less reliable than a separate IFRAME, in which styles are guaranteed not to be mixed up.

Thank you.

[noob]

Hello,

with that Css styles, it resets all Viewer elements and toolbar button, like when you hover or click on the view mode button in the toolbar the dropdown menu goes to button of the page.

[Max Shamanov]

Hello,

We apologize if we did not fully understand your question.
Could you please provide more details about your issue?

Thank you.

[noob]

Hello Max,

i mean with this (.viewer-sandbox *) all the viewer elements css styles gets reset and no css is applied and is overwritten by this css => (all: revert;).

i will try with iframe.

Thanks.

[noob]

I have another custom font issue with the latest version (20261.4). In the report viewer, everything looks good and the fonts are applied, but in the browser print dialog, when I press Print, none of my custom fonts are applied.