Hello Telerik team,
Hey, I am trying to apply styles on the exported PDFs but not globally to all tags.
Suppose I have some `p` elements that should have styles A and some other that should have styles B.
The following will not work.
.k-pdf-export .class-a p {
border: 1px dashed rgb(194, 23, 23);
}
.k-pdf-export .class-b p {
border: 1px dashed #aaa;
}
The selectors will not work. Relevant example:
https://stackblitz.com/edit/react-zhmi5y?file=app%2Fstyles.css
So my questions are:
1. Are the other classes removed?
2. How can I achieve what I need?
3. If this is not supported as of now are there any plans to consider supporting it?
Thanks!
Looking at the styles applied it seems like the first selector is targeting 'p' elements inside elements with class 'another' and that is why it is not working with the current HTML. If we want to color the border of the p with the class we need to apply the styles as below and in this example:
.k-pdf-export p.another { border: 1px dashed rgb(194, 23, 23); padding: 10px; }Thanks for the reply! The thing is that I created this example because I had a similar problem with grid. More specifically I apply a classname on a Grid component whenever there are groups:
<Grid classname='k-group-table' .../>And I have the following CSS rules:
The rule is applied only on the displayed Grid and not on the exported one. Do you have any ideas?
Yes, here is the runnable example
https://stackblitz.com/edit/react-snmdvg?file=app%2Fstyles.css
You can see that while the class is applied on the Grid, it is not applied when the PDF is exported
@plamen any help would be appreaciated
Here is a sample code that allowed me to color the Grid only in the PDF exported version and here is the example:
.k-pdf-export.k-grid { background-color: yellow; color: red; }The case of the Grid export this is how the classes are aligned in the PFD version rendering.
Hope this will help you solve the issue. If you have further questions please don't hesitate to let us know.