-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hello, world!
Issue affecting both Chrome and Firefox.
My software has its printing features, but users sometimes like to print the screen to remember form and UI selections.
I have some content, and an overlapped window over it, with other content.
When printing from browser (ctrl+p, to be clear) the overlapped window is transparent, and all content is printed messed up, even if "print background" is flagged in the browser.
I also tryied "-webkit-print-color-adjust: exact;" on the body CSS, to have printing working at least for Chrome, but it does not work anyway.
Testing on ZK fiddle does not reproduce the problem, because ZK fiddle loads in an iframe the code and it seems that printing ZK content inside an iframe does it.
This is some sample code, it is long just to be sure that some content displays over some other.
If you have any clue, please share! :-)
Thanks everyone!
Gianluca Bonetti
Prometeo Informatica
Italy
<zk>
<style>-webkit-print-color-adjust: exact;</style>
<window vflex="true" hflex="true" mode="embedded" closable="false"
title="Test Case">
<grid>
<rows>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
<row>
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
<label value="Label" />
</row>
</rows>
</grid>
</window>
<window mode="overlapped" width="75%" height="75%" position="center"
title="Test Window">
<grid sizedByContent="false" oddRowSclass="non-odd">
<rows>
<row>
<label value="Label" />
<textbox width="100%" />
<label value="Label" />
<textbox width="100%" />
<label value="Label" />
<textbox width="100%" />
</row>
<row>
<label value="Label" />
<textbox width="100%" />
<label value="Label" />
<textbox width="100%" />
<label value="Label" />
<textbox width="100%" />
</row>
<row>
<label value="Label" />
<textbox width="100%" />
<label value="Label" />
<textbox width="100%" />
<label value="Label" />
<textbox width="100%" />
</row>
</rows>
</grid>
</window>
</zk>
I reply to myself, having found a solution.
The key was to change CSS for windows (z-window, z-window-content, z-header) using background-color set to !important.
I used the same colors from the Breeze theme, but I need to put again in my custom CSS, to have all of them !important.
.z-window {
background-color: #D9E5EF !important;
}
.z-window .z-window-content {
background-color: #FFFFFF !important;
}
.z-window-header {
background-color: #D9E5EF !important;
}
Now my customers can print whatever they want, also when I consider it useless :D
Best regards
Gianluca Bonetti
Prometeo Informatica Italy
Asked: 2015-09-30 13:13:15 +0800
Seen: 22 times
Last updated: Oct 04 '15