0

I need help with re-designing an id-card and also printing it but my code seems to be off when I tried to print. (Using a brother id card printer in order to print the id card.)


 <div class="col-lg-4 d-inline-block align-top pr-5">
   <div class="card" id="printJS-card" style="position: relative; display: inline-block; vertical-align: middle; height: 270px; text-align: left; padding: 30px; margin-bottom: 50px; border-radius: 20px; box-sizing: border-box;">
      <div>
         <img src="" alt="Logo Here" style="position: absolute; width: 116px;"> 
      </div>
      <div class="d-inline-block">
         <img id="capturedImage" style="width: 150px; height: 150px; margin: 40px 0 25px 0;" src="https://www.uni-regensburg.de/Fakultaeten/phil_Fak_II/Psychologie/Psy_II/beautycheck/english/durchschnittsgesichter/m(01-32).jpg" />
      </div>
      <div style="position: relative; display: inline-block; vertical-align: top; padding: 30px;">
         <h5>John Doe</h5>
         <h5> 03/31/2019 at 11:19 AM</h5>
      </div>
      <div class="text-center">
         <h5>Construction</h5>
      </div>
   </div>
   <div class="pt-2">
      <input type="button" value="Capture Face" class="btn btn-primary active btn-md" onclick="take_snapshot()" />
      <input id="btn-populate-data" type="button" value="idScan" class="btn btn-success btn-md" onclick="printJS('printJS-card', 'html')" />
   </div>
</div>

enter image description here enter image description here

user2335485
  • 61
  • 6
  • have you a 'print' stylesheet that could be adjusting the style? (also try changing your right margin to 30px, this may be affecting it) – Rachel Gallen Mar 31 '19 at 22:19
  • I don't have a stylesheet for printing. I would like to adjust the content of the "card" so I can print it properly. Would you know how can I make it look better and properly printed? – user2335485 Apr 01 '19 at 03:29
  • @user2335485 Can you post your `printJS` function call here? Also, I would recommend moving the inline style into your stylesheet. Would that be an option? – crabbly Apr 02 '19 at 19:48
  • my print js function is already part of the code that I posted. Just need to include the library. any suggestion on how to fix this issue? – user2335485 Apr 03 '19 at 03:56
  • Sorry, I didn't realize that you were using this inline. My recommendation is to not let the library scan your html for the applied styes, and instead, pass your style sheet or print style using the `css` or `style` properties. http://printjs.crabbly.com#configuration – crabbly Apr 08 '19 at 14:22

0 Answers0