Problem with CSS when printing

FloB 22 Sep, 2016
Hello,

I have tried this FAQ to print some data from my database directly in the on load event.

On the designer, I have put a custom code :
<div id='print_div'>
{data}
</div>

and a button id=print_button

On the setup, on the on load event, I have a custom code for retrieving data and :
Javascript (founded on the FAQ and adapted a little) :
jQuery(document).ready(function(jQ){
  function printPage()
  {
    var html, css, csss_file, printWin;
    css ="";
    css ="<style type='text/css'>"+css+"</style>";
    css_url = '/libraries/cegcore/css_perso/print_css.css';
    if ( css_url !== '' ) {
        css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
    }
    html = '<html><head>'+css+css_url+'</head>'+jQ(id).html()+'</html>';

    printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    /*printWin.close();*/
  }
  var id;
  id = '#print_div';
  jQ('#print_button').css('visibility', 'visible');
  jQ('#print_button').click(printPage);
});

and I render the form.

The printing function is working but without my css.
If I close the print window, I come back on the popup and if I try to print it with a right click of the mouse, the css is working well.
Another strange thing : if I change the media 'print' to 'screen', or 'print,screen', or 'all', the print window opens with a blank page but if I close it, the popup behind is showing well (and printing with right click of the mouse working well).

If you want to try : http://club-alpin-francais-vienne.fr/fichesortie

Could you help me to fix it please?
Florence
GreyHead 23 Sep, 2016
Answer
Hi Florence,

I had a look but couldn't work out what is happening. You might try:
+ using a full URL for the included CSS file, or
+ adding the CSS directly in the JavaScript instead of including the file.

Bob
FloB 23 Sep, 2016
Hi Bob,

Using a full URL didn't change anything.

Adding the CSS directly in the JavaScript is working 🙂
It's not really simple to use but I will do with that.

Thanks
Florence
This topic is locked and no more replies can be posted.