CSS to target deck cards for print Page Breaks

Hi Conlan, in general, you should be able to target deck cards using the following:
.nx-item.sk-grid-division.sk-card

Is that helpful, or did you already try to use it and it doesn’t work the way you want? What have you tried so far?

Thanks Luzie, yes that works normally when I target the cards, but not using @media print CSS in order to add a page break after each card. ```
As a really straight-forward example of the challenge that I'm running into, if you add the following CSS, the cards are targeted just fine on the page.

.nx-item.sk-grid-division.sk-card{ background: red; }

```
But when you put the same CSS inside a @media print query, the CSS is respected no más within the print preview window...


```
@media print { ``` .nx-item.sk-grid-division.sk-card {
 background: red;
 }
} 
```
```
More specifically to my use case, when I add a page break after each card, it seems to be working very inconsistently. I've tried targeting through lots of different selectors, including your suggestion.

For example, if I target the first component in the deck (i.e. a page title with ID of #sk-eGn-516) to break before, it works consistently for every card. The problem with that solution is that upon printing, I get a blank page as the first page...because the property applies to the very first card. 

Oddly though, when I target the last component in my card (i.e. another page title with ID of #sk-240R-3336) to break after, the page-break CSS doesn't seem to be respected at all.

If you have any insight into why the print CSS would be respected in some cases, but not in others, I would greatly appreciate it. Thanks!

Thanks for the details! Are you using Classic or Lightning?

Classic

Hi Conlan, I’m afraid that I also observed that some CSS is respected in print and some is not, similar to what you described. Unfortunately, I don’t have more insight about that. In case I hear of something helpful, I will let you know!

Hey Luzie,

I was able to get this to work by adding the following style attributes under Card Styles within the Deck Component:

margin: 10px
min-height: 1130px
max-height: 1130px
overflow: hidden

That makes the card fill the page when printed.

I also added a wrapper just inside the deck component…wrapping all my card components…and added the following style attribute:

font-size: 1vw

Lastly, I added the following CSS to the page:

@media print { @page { size: A4; margin: 0 0 0 0; } .sk-deck article { border: none; } .nx-skootable-data{ font-size: 1vw; } .bPageHeader { display: none; } .bPageFooter{ display: none; } } 

Setting the font-size to be responsive (i.e. 1vw) inside the wrapper and on the tables (i.e. nx-skootable-data) was important to ensure that all my components stayed within the max-height of the card and ensured no text got cut off.

At some point, I’ll have to get around to writing up a Skuid page print stylization guide.

Thank you for taking the time to share your solution with the community, Conlan! Much appreciated 🙂