title: Print content of a jquery-ui dialog box using @media print
body: <p>The issue is generate a pdf document of a specific content.</p>
  
  <p>The content of this document is being generated dinamicaly via javascript and being <em>append</em>ed(jquery) inside a jquery-ui dialog.</p>
  
  <p>The css <em>@media print</em> code demands to print the div inside the dialog box.</p>
  
  <p>The dialog box is ejected by a click event and shows the content, then a <em>Ctrl + P</em> action open the navigator print tool to show the preview.</p>
  
  <p>The problem is that the content of the printed file is keeping just the appended html table structure but missing all the characters and most of the content.</p>
  
  <p><a href="https://i.stack.imgur.com/spkWT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/spkWT.jpg" alt="enter image description here"></a></p>
  
  <p>Does it simply not work? or, am I missing something?</p>
  
  <p>Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
      $('#relatorioChecklist').append('&lt;h3&gt;&lt;a onclick="relatorioChecklist()"&gt;adfadfasdfas&lt;/a&gt;&lt;/h3&gt;&lt;br&gt;');
  
  });
  
  
  function relatorioChecklist() {
  
      $('#relatorioChecklist').append('&lt;div id="myModal" class="modal"&gt;&lt;/div&gt;');
      var str = '';
      $('#myModal').append('&lt;div id="relatorio"&gt;&lt;div id="cabecalho"&gt;&lt;br&gt;&lt;h2&gt;Checklist Máquina&lt;/h2&gt;'
                           +'&lt;br&gt;&lt;h2&gt;ddghdh&lt;/h2&gt;&lt;br&gt;&lt;/div&gt;&lt;table class="tabela_checklist"&gt;'+
                  '&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Categoria&lt;/th&gt;&lt;th&gt;título da pergunta&lt;/th&gt;&lt;th&gt;Pergunta&lt;/th&gt;&lt;th&gt;Resposta&lt;/th&gt;&lt;th&gt;Operador&lt;/th&gt;'+
                  '&lt;th&gt;Bloqueio&lt;/th&gt;&lt;th&gt;Operador desbloq.&lt;/th&gt;&lt;/tr&gt;&lt;thead&gt;'+
                  '&lt;tbody&gt;' + str + '&lt;/tbody&gt;&lt;/table&gt;&lt;div id="rodape"&gt;&lt;p&gt;Assinatura supervisor: ____________________&lt;/p&gt;&lt;p&gt;Assinatura operador: ___________________&lt;/p&gt;'+
                  '&lt;/div&gt;&lt;/div&gt;');
      $('#myModal').dialog({width: 900, height:1100});
      
      
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {color:red;}
  p {color:blue;}
  
  @media print {
    body * {
      visibility: hidden;
    }
    #relatorio{
        visibility: visible;
    }
  }
  #relatorioChecklist {
      border: 1px solid black;
  }
  
  #relatorioChecklist a {
      color: black;
      font-weight: bold;
      cursor: pointer;
  }
  #relatorio{
      background-color: white;
      padding:50px;
  }
  #cabecalho{
      text-align:center;
  }
  #rodape{
      padding-top: 200px;
      text-align:center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;My First Heading&lt;/h1&gt;
  
  &lt;p&gt;My first paragraph.&lt;/p&gt;
  &lt;div id="relatorioChecklist"&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>