CODEWITHSUNDEEP
htmlcssprinting
dextervip
dextervip

Reputation: 5069

Print CSS - Avoid cutting DIV's

I am developing an application which generates barcodes, I want to print them but the barcode div is getting cutted in some pages.

enter image description here

CSS:

<style type="text/css">
    * {
        margin:0px;
    }
    #cod {
        width: 180px;
        height: 150px;
        padding: 10px;
        margin: 10px;
        float: left;
        border: solid black 1px;
        text-align: center;
        display: block;
    }

</style>

Code:

<? foreach ($this->ouvintes as $ouvinte): ?>
    <div id="cod">
        <p><?= $ouvinte->nome ?></p>
        <p><?= $ouvinte->instituicao ?></p>
        <p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
        <p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
    </div>
<? endforeach; ?>

Does anyone know how could i avoid this cut?

Thanks

Upvotes: 4

Views: 2602

Answers (4)

mesqueeb
mesqueeb

Reputation: 6324

Try setting page-break-inside to avoid:

div {
    page-break-inside: avoid;
}

Upvotes: -1

Mission
Mission

Reputation: 1297

I ran into a similar problem... the (only) working solution is to place the barcodes in the table... because multi-paged content really only works (without cutting the content or other problems) with tables.

Try something like this:

<table>
<? foreach ($this->ouvintes as $ouvinte): ?>
    <tr id="cod">
        <td><?= $ouvinte->nome ?></td>
        <td><?= $ouvinte->instituicao ?></td>
        <td>Cod. Barras: <?= $ouvinte->codigo_barras ?></td>
        <td style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></td>
    </tr>
<? endforeach; ?>
</table>

Upvotes: 0

fain182
fain182

Reputation: 1075

I think the problem is in float:left.. this is a big problem, but you can find some tricks here

Upvotes: 0

brianreavis
brianreavis

Reputation: 11546

How about trying the page-break-after / page-break-before CSS properties?

You could set it up to break after every 9 barcodes like this:

<? 
$i = 0;
foreach ($this->ouvintes as $ouvinte):
    $i++;
    $pageBreakStyle = ($i % 9 == 0) ? ' style="page-break-after:always"' : '';
?>
    <div id="cod"<?= $pageBreakStyle ?>>
        <p><?= $ouvinte->nome ?></p>
        <p><?= $ouvinte->instituicao ?></p>
        <p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
        <p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
    </div>
<? endforeach; ?>

Upvotes: 6

Related Questions