How to apply print CSS styles only for certain page/scene?

Ask the Community Get Answers
1

Hello,

I have following code. That work OK but the dimensions are general over whole app. How to limit @page only for certain page/scene? Many thanks.

@media print {

@page {
size: 50mm 75mm;
margin: 0;
}
#view_XXX .kn-detail-body {
font-size:13px !important;
padding-top:1em !important;
}

}

2

Hi @MartinD - I tend to use the below CSS.

The code hides the elements with the class .kn-records-nav , all anchor tags, all list items, and all buttons when the page is printed

PS - I’m not a coder :man_technologist::wink:

This will hide on any page:

/* This CSS rule applies only when the page is printed */
@media print {
  
  /* Hides the navigation records element when printing */
  .kn-records-nav {
      display: none; /* Prevents this element from being displayed */
  }
  
  /* Hides all anchor (link) and list item elements */
  a, li {
      display: none !important; /* Hides links and list items forcibly to ensure they are not printed */
  }
  
  /* Hides all button elements */
  button {
      display: none !important; /* Hides buttons in print view, ensuring they are not included in the printed output */
  }
}

This will only affect a specific view_123:

/* This CSS rule applies only when the page is printed */
@media print {
  
  /* Hides the navigation records element with class 'view_123' when printing */
  .view_123 {
      display: none; /* Prevents this element from being displayed */
  }
  
  /* Hides all anchor (link) and list item elements */
  a, li {
      display: none !important; /* Hides links and list items forcibly to ensure they are not printed */
  }
  
  /* Hides all button elements */
  button {
      display: none !important; /* Hides buttons in print view, ensuring they are not included in the printed output */
  }
}

If you want to specify the scene then it would look like this:

/* This CSS rule applies only when the page is printed */
@media print {
  
  /* Hides the elements with classes 'scene_567' and 'view_123' when printing */
  .scene_567,
  .view_123 {
      display: none; /* Prevents these elements from being displayed */
  }
  
  /* Hides all anchor (link) and list item elements */
  a, li {
      display: none !important; /* Hides links and list items forcibly to ensure they are not printed */
  }
  
  /* Hides all button elements */
  button {
      display: none !important; /* Hides buttons in print view, ensuring they are not included in the printed output */
  }
}
3

Hi Carl, I see you are trying to help… not sure you got my point… I need to apply

@page {
size: 50mm 75mm;
margin: 0;
}

only for scene_1234

4

What about:

#scene_123 @page {
    size: 50mm 75mm;
    margin: 0;
}

Or:


@media print {
    #scene_123 {
        page-break-before: always;
        /* additional print styles */
    }

    #scene_123 @page {
        size: 50mm 75mm;
        margin: 0;
    }
}
5

thanks, unfortunately it does not work :frowning:

6

Hopefully a more capable coder will jump in this one. @KnackPros @CSWinnall :smiling_face_with_sunglasses:

7

Hi

Not being a coder at all, I’m not sure if this will work but if you haven’t already tried ChatGPT, here’s an offered solution.

To apply the @page rule only to a specific Knack page (scene), you need to ensure that the print styles only apply when that page is active. Unfortunately, @page itself does not support class-based scoping, but you can control when it takes effect using JavaScript.

Solution:

Modify your CSS and use JavaScript to dynamically add a print-mode class to the body only when printing the specific scene.

1. CSS Update

Wrap the @page rule inside a .print-mode class:

css

CopyEdit

@media print {
  body.print-mode @page {
    size: 50mm 75mm;
    margin: 0;
  }
  
  body.print-mode #view_XXX .kn-detail-body {
    font-size: 13px !important;
    padding-top: 1em !important;
  }
}

2. JavaScript to Activate Print Mode Only on a Specific Scene

Add this script in Knack’s JavaScript settings:

js

CopyEdit

$(document).on('knack-scene-render.scene_YYY', function(event, scene) {
    $('body').addClass('print-mode');
});

$(document).on('knack-scene-render', function(event, scene) {
    if (scene.key !== 'scene_YYY') {
        $('body').removeClass('print-mode');
    }
});

Replace scene_YYY with the actual scene key where you want the print styles to apply.

How It Works:

  • When the specific scene (scene_YYY) loads, it adds the print-mode class to <body>, activating the print-specific styles.
  • If any other scene loads, it removes the class, preventing unintended styling on other pages.

This ensures that your custom @page settings are applied only to the desired page in Knack. :rocket:

Regards
Dean

2 Likes
8

hi Dean, many thanks. Unfortunately the solution doesnt work. The problem is @page cannot be part of print-mode class

9

if someone is interested, here is the code that works:

$(document).on('knack-scene-render.any', function(event, scene) {
  try{
 document.getElementById("dynamicCSS").remove();
  }
  catch(err)
  {}
 if(scene.key=="scene_123")
 {
 var styles ='@media print {@page {size: 50mm 75mm;margin: 0;};#view_xxx .kn-detail-body {font-size:13px !important;padding-top:1em !important;}}';
 var styleSheet = document.createElement("style");
  styleSheet.id="dynamicCSS";
  styleSheet.textContent = styles
  document.head.appendChild(styleSheet)
 }
});
1 Like