Im helping a friend create a resume and wanted to incorporate a cool progress bar for the skills portion.
I have created a progress bar and it displays on the browser completely fine; however, when I try to try to save the page as a PDF, the progress bar doesn't show, as in its just shows a white space.
The code I have for the progress bar:
.w3-progress-container{
width:90%;
height:1.5em;
position:relative;
background-color:#f1f1f1;
border-radius:7px;
height:12px;
margin-top: 5px;
background-color: #d5d4d4;
}
.w3-progressbar{
background-color: #0060A6;
height:100%;
position:absolute;
line-height:inherit;
border-radius:7px;
}
.management{
width:93%;
}
https://jsfiddle.net/w8kaw4y1/
Any ideas on why its not rendering when I save it as a PDF ?
Thanks!
Add following CSS on your style .
@page {
size: A4;
margin: 0;
box-shadow: initial;
-webkit-print-color-adjust: exact;
}
@media print {
html, body {
width: initial;
height: initial;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-print-color-adjust: exact;
-webkit-box-shadow: initial;
box-shadow: initial;
}
}
Check live : https://jsfiddle.net/w8kaw4y1/4/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments