Currently, I am working on developing an application for my school project. One of the features is an invoice sheet with a print option. However, when I try to print by clicking the button or using ctrl+p, the navbar appears in a chaotic and disorganized manner. How can I completely hide the navbar from the print view?
You can see how it looks on the print screen in this image: https://gyazo.com/9aeb5270764e8c9051a3bd78e2c42efb
I attempted to use @media print in conjunction with #navbar { display: none; but it did not work as expected. I might have implemented it incorrectly. I also tried adjusting the CSS styles to find a solution, but nothing seemed to resolve the issue. Unfortunately, the code below did not help me achieve the desired outcome.
Below is the CSS code for that specific page:
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: #555;
}
// More CSS styles...
</style>
This is the snippet of code related to the print functionality:
printWindow: function () {
window.print();
}
<button class='btn' @click='printWindow()'>Print Invoice</button>
My main objective is to ensure that the navbar does not appear on the printed version and ideally to hide the buttons as well.
UPDATE: I reverted the @media styling back to its original state.