-1

As already discussed here: Background color not showing in print preview

I haven't figured out yet, how to get my actual text coloring. I want to get a div only shown on print with the Bootstrap class print-visible, works fine but all the coloring is lost in the preview.

JsFiddle

@media print {
  .test {
    background-color: #1a4567 !important;
    -webkit-print-color-adjust: exact; 
  }
}

If I add the media print CSS it does what it should, but I want the text-colors not the color set by CSS.

Community
  • 1
  • 1
AHahn
  • 137
  • 1
  • 10

1 Answers1

2

Edited based on comment:

You can add !important using JavaScript's style.setProperty() method in 2 ways:

  1. Pure JS: document.getElementById().
  2. jQuery hybrid: Wrap it inside jQuery's .each() .

Both examples below:

$('#filePrintPreview').html("TEST");
//way 1: pure JS exmple
document.getElementById('filePrintPreview').style.setProperty('color', 'red', 'important');
//way 2: wrapped inside jQuery's each() example
$('h3').each(function() {
  this.style.setProperty('color', '#12FF12', 'important');
});
@media print {
  .test {
    background-color: #1a4567 !important;
    -webkit-print-color-adjust: exact;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 test">
  <h3>Heading</h3>
  <div class="box no-border shadow" id="filePrintPreview" style="padding: 2px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-line;">
  </div>
</div>

<button class="btn btn-flat btn-primary btn-sm" style="margin-top:15px;" onclick=" window.print();">Print
</button>
Syden
  • 8,425
  • 5
  • 26
  • 45
  • In my case the !important way works, obviously. But thats not exactly what i need. I have the user to choose a color for the printed text. Can i set the !important tag via jQuery? – AHahn Jan 07 '17 at 22:09
  • DrDreo, yes you can but with JS though, edited above, hope helps. Regards. – Syden Jan 07 '17 at 23:47
  • I have never thought of setting the color !import in that way. Thank you very much. Although setting !important is a pain, i only need one division be printed in color. This is exactly how it works. – AHahn Jan 08 '17 at 14:32