Print css being overridden by bootstrap.min.css

1
Has anyone had any luck overriding the bootstrap css print styles to allow background colours to print? I’m running into an issue where backgrounds and box-shadows are removed forcefully by styles in the bootstrap.min.css and there’s no way to remove them. If I edit bootstrap.min.css and re-run my Mx project locally, my changes seem to get overwritten – seems like bootstrap.min.css is regenerated every time the project is built in Mendix? I have tried overriding in my project UI package sass but in this case, the bootstrap styles are so strong (with !important as well) there doesn’t seem to be a way to override. I’m looking at this snippet specifically: *, :after, :before { color: #000!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important } I’m open to suggestions!
asked
1 answers
1

Hi Rick,

I was able to overwrite the bootstrap @media print behaviour by adding the following to my custom.scss file:

@media print {
    *, :after, :before {
        color: #FFF!important;
        text-shadow: none!important;
        background: blue!important;
        -webkit-box-shadow: none!important;
        box-shadow: none!important
    }
}

Hope this helps.

You can test this in your Chrome browser by setting the Emulate CSS Media to print: https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Cheers, Jeffrey
 

answered