Yii2 two DetailView side by side - yii2

Question

I'm making a purchase order system that exports the PO to PDF, but I need in the upper part to display data from buyer and also from seller.
I would like to have 2 DetailViews side by side, each one with a 50% of page width.
It is possible? So far I've not found any info regarding this and my CSS skills are low.
Thanks for any info.

Answer 1

You can unse bootstrap grid
In view you can palce the detailView in two separated bootstrap column
<div class="col-sm-6 col-md-6 col-lg-6" >
<?= DetailView::widget([
'model' => $modelBuyer,
......
?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6" >
<?= DetailView::widget([
'model' => $modelSeller,
......
?>
</div>
in controller simply pass the two models in render
return $this->render('your_view', [
'modelBuyer' => $modelBuyer,
'modelSeller' => $modelSeller,
]);

Answer 2

I am using the kartik mpdf wrapper of mpdf. I noticed the kv-mpdf-bootstrap.min.css did not define "col-sm-6" as 50% the way it is in bootstrap.css. Since the documentation suggests that the mpdf css overides bootstrap I found the class "col-xs-5" which specifies 41.6666% which was suitable for my output requirements and allowed me to display two detailviews next to each other.
<form class="form-inline">
<div class="form-group">
<div class="col-xs-5">
<p><b>Bill To</b></p>
<div style="border: 1px solid grey; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width:200px">
<?= DetailView::widget([
'model' => $model,
'bootstrap' => false,
//'condensed'=>true,
//'striped' => false,
//'bordered' => true,
'labelColOptions' => ['hidden' => true],
'attributes' => [
'company',
'billStreetAddress',
[
'attribute' => 'billStreetAddress2',
'visible' => (!empty($model->billStreetAddress2)),
],
'billCity',
'billPostalcode'
]
])
?>
</div>
</div>
<div class="col-xs-5" >
<p><b>Ship To</b></p>
<div style="border: 1px solid grey; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width:200px">
<?= DetailView::widget([
'model' => $model,
'bootstrap' => false,
'labelColOptions' => ['hidden' => true],
'attributes' => [
'company',
'shipStreetAddress',
[
'attribute' => 'shipStreetAddress2',
'visible' => (!empty($model->billStreetAddress2)),
],
'shipCity',
'shipPostalcode'
]
])
?>
</div>
</div>
</div>