What is the recommended way to control print css

Questions
1

I’m creating a simple printable version of a page. The default print styles are breaking in funny places or causing overlapping text. We can do our own css, but what is the recommended way to go about it?

I can see the problem in browser print preview, but thus far using developer tools I’ve been unable to make changes “respected” by the print preview feature. Can you help me understand how Skuid behaves when going to print?

More Info

  • Simple page composed of rich text element at the top, a responsive grid with a table inside, then a second responsive grid containing a half dozen full-width field editors holding textareas
  • Textareas hold multiple paragraphs of content and may include images
  • Using Skuid Lightning Design theme
I’m in the process of stripping out more and more to try and get the printable view to “work” by default, but if I can’t I need to do some manual work. I’ve made print css manually in the past, but not sure the best way to do it in Skuid environment.

How would you go about this? Do you have any tips from past print issues?

Thanks,
-John

2

I haven’t tried this, but I wonder if you could use this link as a guide. Add the CSS as inline CSS and add the div elements to template components placed where you want the breaks… Advanced CSS Printing - Using CSS Page Breaks

3

Thanks for the input Raymond. I’ve tried adding the page-break style into the inline CSS for the page, but it doesn’t seem to have any effect. That’s why I’m wondering if there’s something I don’t know about how Skuid transitions to print. I don’t find any print-specific media queries in the theme CSS. I’m hoping there are some Skuid-specific guidelines from past experience.

4

Sorry John.  There is nothing built into Skuid to facilitate print css.  Search the community and you will find a fair number of questions about controlling print. Some good ideas,  some interesting constructs,  but nothing that has made its way formally into Skuid. 

5

Thanks Rob, good to know. We did solve it in the end; the issue appears to be in the use of flex but we were able to override it.

I know this isn’t a CSS forum, but if anyone needs it in the future, we added this to the CSS:

@media print { body .sk-grid-division { display: inline-block; } .nx-basicfieldeditor-section-header { page-break-after: avoid; } .nx-basicfieldeditor .nx-fieldtext { font-size: 16px; } }<br>
1 Like