[SOLVED] Adjusting Div Width with printJS

Adjusting Div Width with printJS

I am attempting to use the PrintJS library. It allows you to target a specific id and print the html contained within that id. The problem that I am facing is when I change the size of the screen it also changes the print size of the div. They give you the option of passing in css but not all changes are applied.

Here is my test usage:

printJS({printable: 'oogles', type: 'html', style: '.modal-header { color: red; width: 100px; } .modal-body { width:100% }'})

Some css changes are successfully applied in the style section like color: red but changing width does not seem to work. I have tried width: 100%; or arbitrarily setting to a specific width like width: 100px;

html:

    <div id='oogles'>
      <div class='modal-header'>wooooooo we are printing some things!</div>
      <div class='modal-body'>well we are trying at least</div>
    </div>

Does anyone have experience using PrintJS to adjust the width of the element for printing?

Thanks

Solution

Try passing your stylesheets to the library. If the HTML doesn't have any inline style tags, its even better if you disable the style processing by the lib.

For example:

printJS({
  printable: 'oogles', 
  type: 'html', 
  style: '.modal-header { color: red; width: 100px; } .modal-body { width:100% }'
  css: [
         'my_stylesheet_1',
         'my_stylesheet_2.css'
  ],
  scanStyles: false
})