CODEWITHSUNDEEP
yii2detailview
Felipe Carrasco
Felipe Carrasco

Reputation: 47

Yii2 two DetailView side by side

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.

Upvotes: 2

Views: 2551

Answers (2)

Stubbsie
Stubbsie

Reputation: 11

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>

Upvotes: 1

ScaisEdge
ScaisEdge

Reputation: 133410

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,
    ]);

Upvotes: 4

Related Questions