Excluding navbar when printing

[deanagan]

This might be more of a question than an issue as I'm quite new to CSS (which could be my issue) and I'm just learning it.

I'm playing around with putting my revealjs slide in a vue component. I am trying to print using decktape, but it seems like I can't find a way to exclude the navbar.

My setup uses vuejs with bootstrap-vue. I've made a sample site here:
https://deanagan.github.io/gallery/

I am using decktape version 3.1.0

This is how I print my slide:

decktape reveal https://deanagan.github.io/gallery/ -s 1380x860 --chrome-arg=--disable-web-security --chrome-path "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" slides.pdf

The output still has the navbar on top in the pdf. Is there a way to exclude it?

I tried adding "class="d-print-none" which is bootstrap 4's way of excluding from print, but it doesn't work.

[astefanutti]

Decktape does not activate the print media type, and rather exports the slides how they render in the Web browser. That probably explains why adding class="d-print-none" does not work.

I can't think of a way of hiding the navbar in Decktape currently. You could try adding an option to hide it manually. Possiby #191 could help here.

[deanagan]

Thanks! I'll do a bit of experimenting and see what I possibly could come up with.

[astefanutti]

Sounds good. Let me know the result of your experiments and see what can be done on Decktape side.

[deanagan]

So I've tried the following steps:

1. I wrapped the navbar so it gets hidden on large screen size. I've set this to be:
   @media (min-width: 2048px) and (max-width: 4095px) { .hidden-xxlg { display: none !important; } }

2. I sent the command to print out the pdf via:
   decktape reveal -s 2048x1024 --screenshots --chrome-path "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://deanagan.github.io/gallery slides.pdf

I noticed that the pdf output still included the navbar, however, the screenshots in my screenshots folder now don't have any navbar in them.

Any idea why this is?

[astefanutti]

It seems CSS media queries may not always be taken into account for PDF export by Puppeteer. I'd suggest you try .hidden-xxlg { display: none !important; } without @media (min-width: 2048px) and (max-width: 4095px), to confirm this is an issue with media queries. Then we can dig what causes it to be skipped, or find another way to have it activated.

[deanagan]

Tried it just now and I noticed that in the actual page on chrome, the navbar is hidden (as expected). Running decktape to print it shows a gray bar on top like:

[astefanutti]

It seems it's only hidden but still accounted in the layout :( Maybe there is a way to override the height to 0 or rely on another CSS property to have it removed from the layout.

[deanagan]

I had another look. I think the gray is not the navbar at all. Printing with the navbar back on, the pdf looks like:

So perhaps it could be how chrome loads it?

[astefanutti]

I've tried it and I don't see the gray area in the PDF: test.pdf

The possible reasons I could see are either the Chrome version you use, or the PDF viewer.

[deanagan]

Sorry about that. You are right, it is coming from my PDF viewer.

[astefanutti]

Let me close this as I think it’s been resolved.