bootstrap not working #66

ajithfort · 2015-11-14T07:47:54Z

hi,

i am using mpdf in yii2. This is my controller code

public function actionPrint_death_certificate1()
    {

        $this->layout   =   'certificate';


        $html   =   $this->render('test');
        require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
        $mpdf=new mPDF();
        $mpdf->WriteHTML($html);
        $mpdf->Output();

    }

my view

<div class="container">
    <div class="row">
        <div class="col-md-6">
        Heading1
        </div>
        <div class="col-md-6">
        Heading2
        </div>
    </div>
</div>

now i get a pdf with heading1 and heading2 in two different lines. Bootstrap is not working. Am i missing something?

return $this->render('test');

when i tried this one it is working and heading1 and heading2 is coming in one line. In pdf it is not working

The text was updated successfully, but these errors were encountered:

finwe · 2015-11-16T13:31:36Z

Are you sure that Yii includes layout on $this->render('test'); call and not some time after return from action method?

Does

var_dump($this->render('test'));
die();

produce an entire HTML including layout or only the view portion?

ajithfort · 2015-11-18T04:33:13Z

hi,

my layout is certificate.php which is as follows

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <link rel="stylesheet" href="<?php echo Yii::$app->getUrlManager()->getBaseUrl();?>/css/certificate.css" type='text/css' media='all' />
    <link rel='stylesheet' id='zn-bootstrap-responsivecss-css' href="<?php echo Yii::$app->getUrlManager()->getBaseUrl();?>/css/certificate-responsive.css" type='text/css' media='all' />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php $this->head() ?>

</head>
<body class="page page-id-2216 page-template-default res1170">
    <?php $this->beginBody() ?>
        <?php echo $content; ?>
        <?php $this->endBody() ?>
</body>
</html>

<?php $this->endPage() ?>```

and i am quite sure that  Yii includes layout on $this->render('test'); call.

2) var_dump($this->render('test'));
die(); this gave me an output like this

```string(1199) "
Heading1 Heading2 "```

finwe · 2015-11-18T12:23:31Z

Judging by some simple try/error testing, there are problems with bootstrap coming from pseudo device-width of the document, print media styles and page margins.

col-md-6 class has full page width when used in mPDF document, as col-sm-6 has. The only class getting somewhat correctly resized to 50% is col-xs-6, but the width is computed from whole page width, not excluding page margins, so the columns are also stacked instead of displayed alongside each other.

I will close this issue now with resolution "bootstrap not supported out-of-the-box". You could use some custom style to make the columns fit when exporting to PDF.

Given some enthusiasm, maybe the community will be able to look into this sometime in the future.

Lizethe · 2015-11-20T12:59:01Z

Bootstrap is external to the default styles for fpdf, which is why classes bootstrap your pdf not work, if you want to customize the look of your pdf need to use a piece of own stylesheets, add after creating your mpdf and use your classes stylesheets. In short bootstrap not work to generate PDF with mpdf.

public function actionPrint_death_certificate1()
{
$this->layout = 'certificate';
$html = $this->render('test');
$stylesheet = file_get_contents('style.css');
require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
$mpdf = new mPDF();
$mpdf->WriteHTML($stylesheet, 1);
$mpdf->WriteHTML($html);
$mpdf->Output();
}

fredrabelo · 2016-10-26T05:23:56Z

Any update on this issue? Bootstrap grid still not supported on mpdf?

I am having the same problem and I really don't want to create a different template just for printing with mpdf, no way to replace all the col-xs-* bootstrap grid with tables.

developerpratika · 2016-11-30T12:59:44Z

Any update on this issue? Bootstrap grid still not supported on mpdf?

finwe · 2016-11-30T13:02:13Z

No, bootstrap grid is still not supported and nobody is working on the support.

Blair2004 · 2016-12-04T08:08:30Z

Same issue, no clear solutions... maybe with custom stylesheet

anguswild · 2017-06-30T19:08:28Z

I think i found a workaround

First we Override the bootstrap css (i use a 10px top-margin for the row but this is not necessary) :

.row {
margin: 10px 0px 0px 0px !important;
padding: 0px !important;
}

a then we set the columns like this

<div class="row">
    <div class="col-xs-6 col-sm-6">TEST</div>
    <div class="col-sm-6">RUT: </b>TEST</div>
</div> 
<div class="row">
    <div class="col-xs-4 col-sm-4">TEST</div>
    <div class="col-xs-4 col-sm-4">TEST</div>
    <div class="col-sm-4">TEST</div>
</div>

synnoc · 2017-10-09T15:49:24Z

This works for me

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	border:0;
	padding:0;
	margin-left:-0.00001;
}

talamihg · 2017-10-23T20:59:55Z

For the most part that helped, not all of my Bootstrap styled HTML is being displayed in the Bootstrap styled grid.

Klap-in · 2017-10-23T21:06:46Z

Reading this, it looks like that an alternative css style for export as pdf is the way to improve the situation. If you can come up with some general recommendations for Bootstrap, I think it is worth a help page at https://mpdf.github.io/

luciash · 2018-02-12T10:55:51Z

@synnoc IMHO margin-left:-0.00001; is useless with no unit specified.

wimurk · 2018-12-18T12:58:56Z

This works for me

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	border:0;
	padding:0;
	margin-left:-0.00001;
}

This actually worked

Ivcho-Varna · 2020-02-03T17:30:26Z

I figured out that the issue is caused by the printing styles of bootstrap. Specifically the following line:

@page { size: $print-page-size; }

When i add this to my stylesheet the PDF renders fine.

@media print { @page { size: auto; } }

Hope it helps somebody.

Cheers :)

navintanzim · 2022-09-13T04:29:02Z

Fast Forward 2022, and the problem is now even worse. Tried everything mentioned here on a stylesheet of Bootstrap v3.3.4 and none of them worked. I think I am gonna have to switch to another service to make my pdfs.

pfpro · 2023-05-16T21:44:51Z

which one would that be - dompdf?

finwe · 2023-05-17T04:57:03Z

@pfpro It is right in the readme https://github.com/mpdf/mpdf#about-css-support-and-development-state

finwe closed this as completed Nov 18, 2015

This comment has been minimized.

Sign in to view

mpdf locked as resolved and limited conversation to collaborators May 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bootstrap not working #66

bootstrap not working #66

ajithfort commented Nov 14, 2015

finwe commented Nov 16, 2015

ajithfort commented Nov 18, 2015

finwe commented Nov 18, 2015

Lizethe commented Nov 20, 2015

fredrabelo commented Oct 26, 2016

developerpratika commented Nov 30, 2016

finwe commented Nov 30, 2016

Blair2004 commented Dec 4, 2016

anguswild commented Jun 30, 2017

synnoc commented Oct 9, 2017 •

edited

talamihg commented Oct 23, 2017

Klap-in commented Oct 23, 2017

luciash commented Feb 12, 2018

This comment has been minimized.

wimurk commented Dec 18, 2018

Ivcho-Varna commented Feb 3, 2020

navintanzim commented Sep 13, 2022

pfpro commented May 16, 2023

finwe commented May 17, 2023

bootstrap not working #66

bootstrap not working #66

Comments

ajithfort commented Nov 14, 2015

finwe commented Nov 16, 2015

ajithfort commented Nov 18, 2015

finwe commented Nov 18, 2015

Lizethe commented Nov 20, 2015

fredrabelo commented Oct 26, 2016

developerpratika commented Nov 30, 2016

finwe commented Nov 30, 2016

Blair2004 commented Dec 4, 2016

anguswild commented Jun 30, 2017

synnoc commented Oct 9, 2017 • edited

talamihg commented Oct 23, 2017

Klap-in commented Oct 23, 2017

luciash commented Feb 12, 2018

This comment has been minimized.

wimurk commented Dec 18, 2018

Ivcho-Varna commented Feb 3, 2020

navintanzim commented Sep 13, 2022

pfpro commented May 16, 2023

finwe commented May 17, 2023

synnoc commented Oct 9, 2017 •

edited