On SKUID V1 pages we’ve set up some custom CSS, including a class to apply to components to cause them to not print on a printer. We use this frequently for pages that people print out to paper or PDF so that we can hide certain elements from the page from printing, and modify things like font sizing and other elements for printing.
Here’s our custom CSS for V1 pages for example:
/*Print View*/
@media print
{
/* no-print class */
.no-print, .no-print *{
display: none !important;
}
/* specify on a tab set to not print the main tabs */
.no-print-main-tabs > ul:first-of-type {
display: none !important;
}
/* Remove Edit Button */
#skuidEditBtn {
display: none !important;
}
/* Remove any Blocked UI */
.blockUI, .blockUI *{
display: none !important;
}
/* Remove Master Page Header */
#sk-2OKF-1918-header, #sk-2OKF-1918-header *{
display: none !important;
}
#sk-37OVs0-172{
margin-top:0px !important;
}
/* Remove Sticky Page Headers */
.sticky-header{
display: none !important;
}
.sticky{
display: none !important;
}
/* Hide Table Footer */
.nx-list-footer{
display: none !important;
}
/* Remove Table Settings icon */
.sk-icon.sk-icon-configure.inline {
display: none !important;
}
/* Make Tables Print Smaller */
.nx-item tr{
height:.8em !important;
}
.nx-item td{
height:.8em !important;
padding:0px !important;
}
.nx-list th{
height:.8em !important;
padding:0px !important;
font-size:.8em !important;
}
.nx-fieldtext{
font-size:.8em !important;
padding:2px !important;
}
/* Make Fields Print Smaller */
div.nx-basicfieldeditor-item>.nx-field, div.nx-basicfieldeditor-section-body>div.nx-basicfieldeditor-item>.nx-field{
margin:0px !important;
padding: 0px !important;
}
.nx-basicfieldeditor-section-header{
font-size:12px !important;
padding:0px !important;
margin:0px !important;
}
.nx-basicfieldeditor-item-label{
font-size:10px !important;
padding:0px !important;
}
.nx-fieldtext{
font-size:10px !important;
padding:0px !important;
}
}
It would be great if there could be print-specific display templates that could be applied to components, such that they display that way only for printing. It would also be nice if components had a checkbox under their properties that if checked would hide the component from a printed page.
The lack of these sorts of printing features is one of the drawbacks stopping us from being able to migrate to using V2, along with the lack of being able to make other custom CSS modifications.