Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

HTML element not printing

Tags:

html

css

printing

I'm generating a barcode using this library and I do need to print the page including the barcode.

When I initiate the print dialog I can't find the barcode although it is taking up space.

$(document).ready(function() {
  window.print();
});
@media print {
  .barcode-container {
    display: block !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
  <div class="barcode-container">
    <div style="font-size:0;position:relative;width:422px;height:30px;">
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;">&nbsp;</div>
    </div>
  </div>
  <p class="bold">ID: 60105</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
    ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
    enim. Curabitur vitae lacinia libero.</p>
</div>

I tried to do a display: block !important; to the barcode container but it still didn't print it. Any ideas?

like image 286
Patrick Gregorio Avatar asked Oct 26 '17 15:10

Patrick Gregorio

People also ask

How do I hide an element when printing a web page?

The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.

Can I force a page-break in HTML printing?

You can use the CSS property page-break-before (or page-break-after ). Just set page-break-before: always on those block-level elements (e.g., heading, div , p , or table elements) that should start on a new line.

2 Answers

Background colours don't print by default. They are set as transparent.

Try:

box-shadow: inset 0 0 0 10000px #000; /*Fake Bg*/

Alternatively the user can set:

Tick 'Print Background Colours and Images' from your browsers 'Page Setup'

You may also use:

-webkit-print-color-adjust: exact;

but this is only supported in Chrome (And other Webkit browsers).

like image 91
DreamTeK Avatar answered Oct 17 '22 11:10

DreamTeK

The Chrome css property "-webkit-print-color-adjust: exact;" will make it work appropriately in chrome.

$(document).ready(function() {
  window.print();
});
@media print {
  .barcode-container>div{
    display: block !important;
   -webkit-print-color-adjust: exact; 
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
  <div class="barcode-container">
    <div style="font-size:0;position:relative;width:422px;height:30px;">
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;">&nbsp;</div>
    </div>
  </div>
  <p class="bold">ID: 60105</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
    ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
    enim. Curabitur vitae lacinia libero.</p>
</div>
like image 24
Sanchit Patiyal Avatar answered Oct 17 '22 10:10

Sanchit Patiyal
Sign in to Comment

Related questions

Flexbox with rotated text
Hide element on hover of another element
How to add low-key (black, transparent overlay) effect to image using CSS?
What does min-width: 100%; width: auto actually do?
Removing that annoying white background from thumbnails in Bootstrap 3
Any way to make html5 audio responsive in Bootstrap?
Move Swiper Pagination to Top of Swiper Container
Inline CSS in Markdown
calc() not working in Firefox
fullcalendar: how can i get the first and last day of the relevant viewed month (and not the days of of the prev \ next month)
How to make svg image fits to parent container
Bootstrap 4 navbar height sass variable missing?
Two divs with inline-block style not aligned
Place the modeBar at top center using plotly.js
jQuery animation don't work after two clicks
Unable to add style to projected content in Angular 4 [duplicate]
How to keep viewBox centered when "zooming" in SVGs?
CSS animation do not work for svg in <img>
Bootstrap 4 navbar-inverse doesn't have colour
ionic 2 /3 ; change image src tag when Onclick

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!