Bootstrap 4 not displaying the colour in Print review

[didierpeinke]

Describe the issue

I have been struggle in past few days to display colour background on print review on Bootstrap 4. The Bootstrap 5 does display. But I do not want upgrade to bootstrap 5 due to it will cause too much work to change in whole project.

So I'm using datatables to display the table with row of information. the column does display different colour no problem. but when I print as the print review show without colour.

Is there is something you can help with add CSS or update the bootstrap 4 file to display colour background on print review?

By the way I'm using:

Reduced test cases

I dont have example but here the link from someone have same problem:

https://jsfiddle.net/2vtr1npL/

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

4.6.2

[julien-deramond]

Converted the issue to a Q&A discussion as Bootstrap 4 is EOL (End-Of-Life) and so won't have new releases.

[didierpeinke]

Are you saying the Bootstrap 4 will not update the print color?

if not possible, is there is trick to display colour on print review without require upgrade to Bootstrap 5?

[julien-deramond]

Yes, Bootstrap 4 has reached its end of life. There won't be any new v4 versions.

if not possible, is there is trick to display colour on print review without require upgrade to Bootstrap 5?

Let's see in this GitHub Discussion if anyone from the community can help you with this use case :)

[didierpeinke]

Alright. Thank you. I will keep eye on this post if anyone can help.

[julien-deramond]

I've looked into the issue briefly, and although my solution may not be the cleanest, it should point you in the right direction.

In Bootstrap v4 (but no longer in v5), there were specific print-related styles that affected tables, which you can find in this section of the Bootstrap v4 CSS.

What’s particularly relevant in your case is:

@media print {
  .table td,
  .table th {
    background-color: #fff !important;
  }
}

This rule is the reason why, when you print your table, the cells default to a white background, even overriding Bootstrap’s standard gray background. That’s why your background color isn’t showing.

To help, I’ve put together a CodePen based on your example. I didn’t delve into every detail, but I did manage to get a red background to appear when printing via Firefox (you'll need to trigger the print dialog to see it).

Here’s how I addressed it:

In the <style> block, I added:

td.red-background {
  background-color: red !important;
}

The key here is using !important to override the Bootstrap default styles.

Then, I replaced your jQuery line:

- $(win.document.body).find('span.score_red').parent().css('background-color', 'red');
+ $(win.document.body).find('span.score_red').parent().addClass('red-background');

When using .css('background-color', 'red');, I think the !important is not applied, so Bootstrap's print-specific styles are still taking precedence. By switching to a class with a background color defined using !important, you can successfully override those styles.

Depending on your use case, you could simplify this further, perhaps by handling everything with a single class.

Hope it can help :)

---

There is another alternative but needing to use Sass. In Bootstrap v4, if you customize your build to use Sass and set $enable-print-styles to false (see https://getbootstrap.com/docs/4.6/getting-started/theming/#sass-options), you wouldn't have this overridden print style done by Bootstrap v4.

You can clearly see that all the @media print code from Bootstrap is surrounded by $enable-print-styles here: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_print.scss

Here's a link that explain how you can import Bootstrap in Sass in your project: https://getbootstrap.com/docs/4.6/getting-started/theming/#importing

[didierpeinke]

Hi Julien,

Thank you very much with reply and example. So I've experiment with

@media print {
    .table td,
    .table th {
        background-color: transparent !important;
    }
}

So I've test with the $(win.document.body).find('span.score_red').parent().css('background-color', 'red'); and it did display the color on print review.

So there is issue, as I am looking to specific column on datatable to display multiple background color depend on the value from the cell.

For code below I'm working on.

_var test = $("#example").DataTable();

var v = test.column(4).data().toArray();

for (var i = 0; i < v.length; i++) {
   $(doc.document.body)
    .find("table tbody tr:nth-child(" + (i + 1) +") td:nth-child(4)")
    .css("background-color", **ColorCode(test.cell(i,4).data()** );
}_

What I'm trying to is each for loop of each row on datatable (tr), and I need to read specific value (td) then it will use function ( ColorCode() ) that will return specific color.

As I've tried, it return no background color on print review.

Would you look in code above and help if you can?

[julien-deramond]

So I've test with the $(win.document.body).find('span.score_red').parent().css('background-color', 'red'); and it did display the color on print review.

I haven't re-tested it, but be cautious: there's a difference between the 'print preview' display in the browser and the actual rendering when you click 'Print' in your browser to generate a PDF or print the page. In some cases, the 'print preview' looked fine, but the output when generating a PDF or printing was inconsistent (without the background color).

Would you look in code above and help if you can?

I'm really sorry, but I won't be able to dedicate more time to this. I hope someone from the community can assist you further.

[didierpeinke]

But when I add .parent()

$(doc.document.body)
.find("table tbody tr:nth-child(" + (i + 1) +") td:nth-child(4)")**.parent()**
.css("background-color", ColorCode(test.cell(i,4).data() );

it does display the color on print review

[didierpeinke]

Hi Julien,

Don't worry. I have manage to find a way. What I'm using is

Javascript

var test = $("#example").DataTable();

var v = test.column(4).data().toArray();

for (var i = 0; i < v.length; i++) {
    $(doc.document.body)
        .find("table tbody tr:nth-child(" + (i + 1) + ") td:nth-child(5)")
        .addClass(ColorCode(test.cell(i, 4).data()));
}

Function:

function ColorCode(x) {
    switch (x) {
        case "Test1":
            return "Test1-background-color";
            break;

        case "Test2":
            return Test2-background-color";
            break;
        default:
          return "";
          break;
}

in CSS it is important to use:

/*Remove white background on datatable in SITS*/
@media print {
    .table td,
    .table th {
        background-color: transparent !important;
    }
}

/* for cell background color, !important is required to make it work*/

td.Test1-background-color {
    background-color: #99FF99 !important;
}

td.Test2-background-color {
    background-color: #02B551 !important;
}