Page break in not working in Chrome print

Ron commented on Nov 17, 2020

Hi

I am using in my view the line:

<div class="page-break"></div>

in my code and when I try to print id does not generate a new page for each report. here is the report view code

foreach ( $this->classList as $class) {
        echo '<div class="page-header" style="height:30px"><span>Header</span></div>';
        echo '<h1 class="text-center pb-3">'. lang('tts.report_class_schedule'). ' ' .$class['class_name']. '</h1>';
        Table::create(array(
            "dataSource"=>$this->dataStore("DS_".$class['id']),
            "cssClass"=>array(
                "table"=>"table table-bordered text-center",
                "th"=>"table-dark text-center",
            ),
            "sorting"=>array(
                "hour_num"=>"asc",
            )
        ));
        echo '<div class="page-footer" style="bottom:30px"><span>Footer</span></div>';
        echo '<div class="page-break"></div>';
    }

Sebastian Morales commented on Nov 17, 2020

Ron, which export package are you using, Export or CloudExport? And did you use this page-break div tag in your report view or PDF view?

Ron commented on Nov 17, 2020

I am not using export package only printing to a regular printer using standard windows/mac dialog. According to your question I understand the the page break works only in export. but what about new page for a regular printed reports?

Sebastian Morales commented on Nov 18, 2020

Oh, The div.page-break tag only works by default with our Export package. if you prefer printing by Chrome dialog manually, please add the following CSS rule to your report's view together with div.page-break:

@media print {
  .page-break { page-break-inside: avoid; page-break-before: always; }
}

Ron commented on Nov 18, 2020

Sebastian I did as you said but it's not working. this is the code

<?php
//MyReport.view.php
use \koolreport\widgets\koolphp\Table;
?>
<html>
<head>
    <title><?php echo lang('tts.report_teacher_schedule'); ?></title>
    <style>
    @media print {
        .page-break { page-break-inside: avoid; page-break-before: always; }
    }
    </style>
</head>
<body DIR="RTL">
    <div class="row">
        <div class="col text-center">
            <div class="hidden-print">
                <button id="print" class="btn btn-success" href="<?php echo base_url('reports'); ?>" onclick="javascript: window.print()">
                    <?php echo lang('tts.print'); ?>
                </button>
                <a class="btn btn-secondary mr-2" href="<?php echo base_url('reports'); ?>">
                    <?php echo lang('tts.back'); ?>
                </a>
            </div>
        </div>
    </div>
    <?php
    foreach ( $this->teachersList as $teacher) {
        echo '<section class="sheet padding-10mm">';
        echo '<h1 class="text-center pb-3">'. lang('tts.report_class_schedule'). ' ' .$teacher['teacher_name']. '</h1>';
        Table::create(array(
            "dataSource"=>$this->dataStore("DS_".$teacher['id']),
            "cssClass"=>array(
                "table"=>"table table-bordered text-center",
                "th"=>"table-dark text-center",
            ),
            "sorting"=>array(
                "hour_num"=>"asc",
            )
        ));
        echo '<div class="page-break"></div>';
        echo '</section>';
    }
    ?>
</body>
</html>

Sebastian Morales commented on Nov 18, 2020

Please try this simple html to see if page break works with your browser:

<head>
<style>
    @media print {
      .page-break { page-break-inside: avoid; page-break-before: always; }
    }
</style>
</head>
<body>
Hello world 1

<div class='page-break'></div>

Hello world 2
</body>

Looking at your code, how about moving the div.page-break to after </section>. There're some cases where page break won't work if a parent tag has a certain position or float property.

Ron commented on Nov 18, 2020

Sebastian you are a saver@ the section actually made the problem. removing the section solved the problem. thanks

Ron commented on Nov 18, 2020

Sebastian another two question. 1. I want to force the header to be always at the bottom of the A4 page either its landscape or portrait? 2. How can I setup a form to be landscape? Ron

Ron commented on Nov 18, 2020

Sebastian?

KoolReport's Forum

Page break in not working in Chrome print #1716

Build Your Excellent Data Report