Switch from portrait to landscape

Ron commented on Jul 20, 2021

Hi, I have a report that displays a teacher schedule. I want to be able to change from portrait to landscape. currently the schedule table is display portrait on A4 and but I open the chrome print dialog box and change the orientation from portrait to landscape the the table remains in the same direction although the page orientation is changes to landscape. please see the below report output:

Sebastian Morales commented on Jul 21, 2021

Is there any @media or @page css rules in your page? If there is, pls try to remove all or some of them to see if they affect Chrome print mode. Rgds,

Ron commented on Jul 21, 2021

Nothing is there beside the code of the report view and chrome still makes the same behaviour

Sebastian Morales commented on Jul 21, 2021

Pls open the page in Firefox and see if the same happens or not? Rgds,

Ron commented on Jul 21, 2021

tired it in Safari and it works fine. What can be done regards chrome because my system is designed to work mainly in chrome?

Sebastian Morales commented on Jul 21, 2021

Pls post your report view code for us to have a look. Tks,

Ron commented on Jul 21, 2021

<?php
//MyReport.view.php
use \koolreport\widgets\koolphp\Table;
if ($this->params['embed_in_page'] == true ) {
    foreach ( $this->teachersList as $teacher) {
        Table::create(array(
            "dataSource"=>$this->dataStore("DS_".$teacher['id']),
            "cssClass"=>array(
                "table"=>"table-bordered text-center",
                "th"=>"table-dark text-center",
            ),
            "sorting"=>array(
                "hour_num"=>"asc",
            )
        ));
        echo '<div class="page-break"></div>';
    }
 } else { ?>
<html>
<head>
    <title><?php echo lang('tts.report_teacher_schedule'); ?></title>
</head>
<body DIR="RTL">
    <div class="row d-print-none">
        <div class="col text-center">
            <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>
    <?php
    foreach ( $this->teachersList as $teacher) {
        echo '<div class="header print-only"><img src="'.site_url('../assets/img/'.(isset($_SESSION['institute_number']) ? $_SESSION['institute_number'].'.png' : "logo.svg")).'" height="38" /></div>';
        echo '<h1 class="text-center pb-3">'. lang('tts.report_teacher_schedule'). ' ' .$teacher['name']. '</h1>';
        Table::create(array(
            "dataSource"=>$this->dataStore("DS_".$teacher['id']),
            "cssClass"=>array(
                "table"=>"table-bordered text-center",
                "th"=>"table-dark text-center",
            ),
            "sorting"=>array(
                "hour_num"=>"asc",
            )
        ));
        echo '<div class="footer print-only">'.lang('tts.print_footer').'</div>';
        echo '<div class="page-break"></div>';
    }
    ?>
</body>
</html>
<?php } ?>

Sebastian Morales commented on Jul 21, 2021

Pls wrap all of your Table widgets inside <html> <body> and <div> tags. There's a chance Chrome would behave differently from the <table> tag alone. Rgds,

Ron commented on Jul 21, 2021

but there is a <html><body> and <div>

Sebastian Morales commented on Jul 22, 2021

In your first if clause:

if ($this->params['embed_in_page'] == true ) {

there's no html or body tag inside. They are only in the else clause. Rgds,

Ron commented on Jul 22, 2021

this part is not used! only the code after that. the code for embed is only if I display the report inside an html page without printing which already has inside html and page tags. the other code is for printing modal. and this is what I use!

Sebastian Morales commented on Jul 23, 2021

Try this step: create a simple index.html page with a simple table with some rows in it. Then open it in Chrome and print it to see how it works. If it works, compare it to your report view html and remove differences, such as DIR="RTL", etc, until report view works. Rgds,

KoolReport's Forum

Switch from portrait to landscape #2219

Build Your Excellent Data Report