CSS to target deck cards for print Page Breaks

Questions
,
1

For the life of me…I can’t seem to target cards within a deck to create a print page break after each card.

Any ideas how I can do this?

2

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?

3 
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!
4

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

5

Classic

6

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!

7

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.

8

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