Error cracking page to print in Google Chrome

Question

Error cracking page to print in Google Chrome

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

4

I have a page that prints tickets in 3 ways. Each ticket path is within a div with class ticket .

After each route, I need to generate a page break. However, by using page-break-after: always; in Google Chrome, sometimes (depending on content), Google Chrome breaks the page out of the desired location, unconfiguring the whole impression. (see in the image below the image that would be the logo cut).

MicrosoftEdgeworksperfectly.

Tomakeiteasiertoreproducetheerror,belowismyHTMLcodewith%cssCSS.

<!DOCTYPEhtml><html><head><metacharset="UTF-8">
<style>

*{font-family: arial;}
@media print {
    .ticket{ 
        page-break-after: always; 
        page-break-inside: avoid;
        position: relative;
    }
    body{
        position: relative;
        background-color:red;
    }
}


</style>
</head>
<body>

    <div class="ticket">
        <img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg"alt="LOGO" /><br/>
        RAZAO SOCIAL DA EMPRESA LTDA.<br/>
        Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
        CNPJ: 11.111.111-1111-11<br/>
        TF: 11.111.111 FP<br/>
        Isento de ISS (lei número 1.111)<br/>
        Telefones: 0800 111 1111 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        <br/>
        <strong>Via 1</strong>
        <DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
        <DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
        Tipo: XYZ<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
    </div>

    <div class="ticket">
        <img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg"alt="LOGO" /><br/>
        RAZAO SOCIAL DA EMPRESA LTDA.<br/>
        Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
        CNPJ: 11.111.111-1111-11<br/>
        TF: 11.111.111 FP<br/>
        Isento de ISS (lei número 1.111)<br/>
        Telefones: 0800 111 1111 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        <br/>
        <strong>Via 2</strong>
        <DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
        <DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
        Tipo: XYZ<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
    </div>

    <div class="ticket">
        <img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg"alt="LOGO" /><br/>
        RAZAO SOCIAL DA EMPRESA LTDA.<br/>
        Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
        CNPJ: 11.111.111-1111-11<br/>
        TF: 11.111.111 FP<br/>
        Isento de ISS (lei número 1.111)<br/>
        Telefones: 0800 111 1111 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        <br/>
        <strong>Via 3</strong>
        <DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
        <DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
        Tipo: XYZ<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
    </div>
</body>
</html>

How to make the page break occur in the correct location using Google Chrome?

html css google-chrome

asked by anonymous 25.10.2016 / 17:20

3 answers

1

Comparing what you've described with some situations that users already have, such as link (in English) , here are some suggestions to try to solve your problem:

Check and try to change the margin of the image inside the div;

Some users reported that working with table elements instead of div solved the problem.

Good luck, hug!

27.10.2016 / 22:18

0

I made some adjustments to the code, I ask you to see what will possibly help you:

div.page {
  page-break-after: always;
  page-break-inside: avoid;
}

<div class="page">
  <h1>Pagina 1</h1>
</div>
<div class="page">
  <h1>Pagina 2</h1>
</div>
<div class="page">
  <h1>Pagina 3</h1>
</div>

01.11.2016 / 04:13

Is it possible to "simulate" C ++ Templates in C? Tuples in database

score 2 · Accepted Answer

Dude, I did some testing here on your code and got it to work on Chrome. Apparently, using block elements (eg div) with borders breaks the layout of the page-break. Try the following:

Change all elements <div> that you use with border by element <p> and remove from css-inline width: 100%;