Print a container with UI5 elements, icons links, forms list

[kmanisha29]

I am currently facing an issue while attempting to print a form with various UI5 elements inside a card, designed in read-only mode. The form contains a list of items with labels and values, including UI5 components like icons, markdown text, chips, separators, links, and a table with column filters.

When trying to print this DOM element using its ID within an iframe, I’ve encountered the following issues:

Styles are not applied correctly.

Icons and certain UI5 tags are not rendered.

Links after the toolbar separator are missing.

Although UI5 tags and dynamically generated classes are present in the DOM, they don’t reflect properly in the printed output.

Could you kindly suggest how to ensure the styles are correctly applied in the print iframe? Alternatively, if you could provide a link to the relevant styles.css file that can be directly linked, it would be immensely helpful.

Additionally, is there a way to ensure that the UI5 tags are resolved to their corresponding basic HTML elements with proper styles applied for printing?

Your guidance on this would be greatly appreciated as it’s quite urgent for our current task.

Thank you in advance for your support.

[Lukas742]

Hi @kmanisha29

I'm transferring this question to the ui5-webcomponents repo since all web components are developed there.
Also, it would help if you provide an example demonstrating the issue.

[nnaydenow]

Hi @kmanisha29,

Could you clarify what you mean by "printing a form with various UI5 elements"? Are you trying to append HTML content within the iframe?

If so, keep in mind that an iframe operates as a separate document with its own execution context. This means that web components, including UI5 elements, need to be redefined within the iframe as well—they won’t automatically inherit definitions from the parent document.