CSS to target deck cards for print Page Breaks

  • 1
  • Question
  • Updated 3 days ago
  • In Progress
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?
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,572 Points 3k badge 2x thumb

Posted 2 weeks ago

  • 1
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 1,504 Points 1k badge 2x thumb
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?
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,572 Points 3k badge 2x thumb
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!

Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 1,504 Points 1k badge 2x thumb
Thanks for the details! Are you using Classic or Lightning?
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,572 Points 3k badge 2x thumb
Classic
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 1,504 Points 1k badge 2x thumb
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!
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,572 Points 3k badge 2x thumb
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.