0

I need the default bootstrap css left intact when printing a table with a fixed header, but need to override a couple of styles relating to overflow as the table is scrollable vertically.

Basically I want targetStyles: ['*'] left in to match what is in my bootstrap css template, but need to override tbody {overflow:auto} and another custom style of .table-responsive {overflow-x:auto} . How can I keep all the bootstrap css but change these two styles for a print job?

I've tried using targetStyles: and style: with a list of these two styles. https://printjs.crabbly.com/#documentation is helpful but not intuitive (yet) for this scenario

/* my table is contained in a div with id of #howDoingTable */
printJS({
   printable: 'howDoingTable',
   type: 'html',
   targetStyles: ['*'],
   style: '#howDoingTable tbody {overflow:none;} #howDoingTable.table-responsive {overflow-x:none;}'              
});
/*It's ignoring the style with the two overrides I want to implement via style:*/
Midiman
  • 1

1 Answers1

0

Unless this isn't possible with just printJS in its current offering, I found out the workaround is to change the styles that need changing right before the call to printJS and then re-enable them right afterwards via jQuery:

      //change overflow css to visible to remove scrolling in the ui
      $("#howDoingTable.table-responsive").css("overflow-x","visible");
      $("#howDoingTable tbody").css("overflow","visible");
      printJS({
          printable: 'howDoingTable',
          type: 'html',
          targetStyles: ['*']            
      });
      //change the overflow css properties back to scrolling
      $("#howDoingTable.table-responsive").css("overflow-x","auto");
      $("#howDoingTable tbody").css("overflow","auto");
Midiman
  • 1