KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

Page break in not working in Chrome print #1716

Closed Ron opened this topic on on Nov 17 - 8 comments

Ron commented on Nov 17

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

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

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

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

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

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

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

Ron commented on Nov 18

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

Sebastian?

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
solved

None