HTML/CSS Progess Bar shows on browser but doesnt show when trying to print the document

Question

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!

What are you using to save the page as a PDF and for which browser? — Tasos, Sep 24 '16 at 07:26
If you mean PRINT TO PDF then go to (more settings) and tick the (background graphics) option — Tasos, Sep 24 '16 at 07:33

score 0 · Answer 1 · answered Sep 24 '16 at 07:29

0

add this code inside your style tag

-webkit-print-color-adjust: exact;

example

    @page {
        size: A4;
        margin: 0;
        box-shadow: 0;
        -webkit-print-color-adjust: exact; 
    }
    @media print {
        html, body {
            width: 210mm;
            height: 297mm;
            margin: 0;
            padding: 0;
            overflow: hidden;
            -webkit-print-color-adjust: exact; 
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    }

answered Sep 24 '16 at 07:29

j.limjinda

128
2
6

thanks so much Jirayu! just for clarification, mind if you provide some explanation of how this code fixed it. newbie to css – exAns Sep 24 '16 at 07:59
when we press print command(cmd+p in macOSX or ctrl+p in Windows) the default option for background graphic is uncheck(http://imgur.com/JJLjal7), with this code we can trigger webkit browser to checked as default, see more on this topic: http://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview – j.limjinda Sep 25 '16 at 04:46

score 0 · Accepted Answer · answered Sep 24 '16 at 08:46

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/

HTML/CSS Progess Bar shows on browser but doesnt show when trying to print the document

2 Answers2