Hi
So I finally got the PDF export working using a dedicated print skin. Now I've run into another problem which is that the PDF does not reflect the actual CSS as it looks on the screen.
As can be seen from the two attached screenshots. The one with the blue background reflects the app running in the browser and looks fine. The other (white background) is the same snippet from the generated PDF. As you can see in the PDF screen, the red background, the box border and the spacing is not reflected (arrows indicate problem areas). What could be the issue causing this?
I'm using the Enterprise skin with the following CSS added to the layout, to enable the shown screen result.
So I finally got the PDF export working using a dedicated print skin. Now I've run into another problem which is that the PDF does not reflect the actual CSS as it looks on the screen.
As can be seen from the two attached screenshots. The one with the blue background reflects the app running in the browser and looks fine. The other (white background) is the same snippet from the generated PDF. As you can see in the PDF screen, the red background, the box border and the spacing is not reflected (arrows indicate problem areas). What could be the issue causing this?
I'm using the Enterprise skin with the following CSS added to the layout, to enable the shown screen result.
Code:
@page {
margin: 10%;
@bottom-right {
color: black;
font-family: Arial, Verdana, sans-serif;
font-size: 9px;
font-weight: normal;
content: "Created with Forecast.it - " counter(page);
}
}
@media screen, print {
.pageTitle {
font-size: 22px;
color: #3f127a;
}
.pageTitleLineHeight100 {
font-size: 22px;
text-overflow: ellipsis;
color: #3f127a;
line-height: 100%;
}
.pageSubTitle {
font-size: 16px;
text-overflow: ellipsis;
color: #3f127a;
}
.pageSubTitleLineHeight100 {
font-size: 16px;
text-overflow: ellipsis;
color: #3f127a;
line-height: 100%;
}
.reportTile {
border: 1px solid #ababab;
padding: 18px;
background: red;
}
.reportTileTitle {
color: #3f127a;
font-size: 14px;
margin-bottom: 8px;
}
.reportTileData {
color: #3f127a;
font-size: 16px;
}
}