html - Put as many elements as possible in each page print -


i trying print categories, each category contains unknown number of elements.

every page needs:

  1. header , footer.
  2. to include categories as possible

i try "position:fixed" header , footer, , "page-break-inside: avoid" category container. first page fine, in others categories start top of page, , behind header.

the question :

  1. there way in media print?

  2. if not, there way render page looks wont, , print it?

this example:

<style> @media print {   .category {     page-break-inside: avoid;     padding: 10px;   }   .page {     padding-top: 20px;   } }  </style>   <body>   <h1 style="position:fixed">this text hide category in second page </h1>   <div class="page">     <div class="category">       category 1<br/>item<br/>item<br/>item<br/>     </div>     <div class="category">       category 2<br/>item<br/>item<br/>item<br/>item<br/>item<br/>     </div>     <div class="category">       category 3<br/>item<br/>item     </div>      <!--and on  --> </div> </body>

finally calculate div height each category, , add page-break if needed. 

for (let cat of menu.categories) {       mywindow.document.write('<div id="' + cat._id + '" class="content">');       // write category       mywindow.document.write('</div>');  //end of content   var currentpagedivheight = mywindow.document.getelementbyid('a4').clientheight - (1000 * pagenamber);     console.log('currentpagedivheight:' + currentpagedivheight)   if ( currentpagedivheight > 750) {     pagenamber++;     mywindow.document.getelementbyid(cat._id).style.setproperty("page-break-before",  'always');     mywindow.document.getelementbyid(cat._id).style.setproperty("padding-top",  '5cm');   } }

Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more