search

kartik-v / yii2-mpdf

A Yii2 wrapper component for the mPDF library which generates PDF files from UTF-8 encoded HTML.
http://demos.krajee.com/mpdf
Other
161 stars 150 forks source link

Unable to display elements in grids #42

Closed jordino96 closed 7 years ago

jordino96 commented 7 years ago

We have troubles because doesn't correctly display the grids

Controller

public function actionPdfMif($idimpianto) {
        $impianto = $this->findModel($idimpianto);
        $pdf = new Pdf([
            'mode' => Pdf::MODE_CORE, 
            'format' => Pdf::FORMAT_A4, 
            'orientation' => Pdf::ORIENT_LANDSCAPE, 
            'destination' => Pdf::DEST_BROWSER, 
            'cssFile' => '@vendor/kartik-v/yii2-mpdf/assets/bootstrap.min.css',
            'content' => $this->renderPartial('_pdf-mif'),
            'options' => ['title' => 'Krajee Report Title'],
            'methods' => [
                'SetHeader' => ['MIF '.$impianto->titolo_pagina],
                'SetFooter' => ['{PAGENO}'],
            ],
            'destination' => Pdf::DEST_DOWNLOAD,
            'filename' => 'MIF-'.$impianto->codice_separato.".pdf",
        ]);
        return $pdf->render();
    }

View

<div class="container">

    <div class="row">
        <div class="col-xs-12" style="background-color: red">12</div>
    </div>

    <div class="row">
        <div class="col-xs-6" style="background-color: yellow">6</div>
        <div class="col-xs-6" style="background-color: yellow">6</div>
    </div>

    <div class="row">
        <div class="col-xs-4" style="background-color: lightskyblue">4</div>
        <div class="col-xs-4" style="background-color: lightskyblue">4</div>
        <div class="col-xs-4" style="background-color: lightskyblue">4</div>
    </div>

    <div class="row">
        <div class="col-xs-3" style="background-color: greenyellow">3</div>
        <div class="col-xs-3" style="background-color: greenyellow">3</div>
        <div class="col-xs-3" style="background-color: greenyellow">3</div>
        <div class="col-xs-3" style="background-color: greenyellow">3</div>
    </div>

    <div class="row">
        <div class="col-xs-2" style="background-color: whitesmoke">2</div>
        <div class="col-xs-2" style="background-color: whitesmoke">2</div>
        <div class="col-xs-2" style="background-color: whitesmoke">2</div>
        <div class="col-xs-2" style="background-color: whitesmoke">2</div>
        <div class="col-xs-2" style="background-color: whitesmoke">2</div>
        <div class="col-xs-2" style="background-color: whitesmoke">2</div>
    </div>

    <div class="row">
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
        <div class="col-xs-1" style="background-color: pink">1</div>
    </div>

</div>

PDF result screenshot- domain - date - time

kartik-v commented 7 years ago

Refer mPDF documentation .... it only supports CSS-2 specification and not CSS-3 styling.

maxxer commented 7 years ago

But in your CSS you define col-xs-* classes... Why then? (just to understand)