Listview three (3) by Row

I have my Listview in one (1) per row as shown below

7621

listview column.PNG

But I want it to be arranged in three (3) per row as shown in the diagram below

7622

listview row.PNG

How do I achieve this

[b]

View

[/b]

[b]

_available-courses

[/b]




<?php

// _list_item.php

use yii\helpers\Html;

use yii\helpers\Url;

use yii\widgets\DetailView;

use yii\helpers\ArrayHelper;

use app\models\Course;

use kartik\widgets\Select2;

?>

<div class="col-xs-12" style="padding-top: 10px;">

   <div class="box">  

       <div class="box-body table-responsive">  





<div class="available-course">

<div class="col-xs-12 col-sm-4 col-lg-4">

<article class="item" data-key="<?= $model->course_id; ?>">


    <h2 class="title">

    <?= Html::a(Html::encode($model->course_name), Url::toRoute(['course-structure/course-topics', 'csid' => $model->course_id]), ['title' => $model->course_name]) ?>

    </h2>


<!--    <div class="list-group">-->

<?= DetailView::widget([

    'model' => $model,

    'options' => ['class' => 'detail-galery-view2'],

    'attributes' => [

 

        [

            'attribute'=>'',

            //'value'=>$model->foto,

            'value'=>Html::a(Html::img(Yii::$app->request->baseUrl.'/../images/course.png', ['width'=>'142', 'height' => "200"])),

            //'value'=> Html::img(Yii::$app->request->baseUrl.'/../images/course.png', ['width'=>'192', 'height' => "256"]),

            'format' => 'raw',

        ],


        [

        'attribute'=>'',

        'value'=>$model->course_name,

        //'course_name',

        ],

            [

              //'label' => Yii::t('app', 'Course Categories'),

              'attribute' => '',

              'value' => $model->courseCategory->course_category_name,

                ],


        [

        'attribute'=>'',

        'template' => '{view}',

        'format' => 'raw',

        'value'=> Html::a(Yii::t('app','Course'), Url::toRoute(['course/view', 'id'=>$model['course_id']])),

        ],

    ],

]) ?>  

<!--</div>-->


</article>

</div>

</div>


     </div>  

   </div>

</div>	



[b]

available courses

[/b]




<?php


use yii\helpers\Html;

use yii\bootstrap\ActiveForm;

use yii\helpers\Url;

use yii\widgets\ListView;

use kartik\widgets\Select2;

use app\models\Course;

use yii\helpers\ArrayHelper;


$this->title = Yii::t('app', 'Available Courses');

$this->params['breadcrumbs'][] = ['label' => Yii::t('app', 'Course Management'), 'url' => ['default/index']];

$this->params['breadcrumbs'][] = $this->title;

?>

<div class="col-xs-12">

  <div class="col-lg-8 col-sm-8 col-xs-12 no-padding"><h3 class="box-title"><i class="fa fa-th-list"></i> <?php echo Yii::t('app', 'Available Courses') ?></h3></div>

  <div class="col-lg-4 col-sm-4 col-xs-12 no-padding" style="padding-top: 20px !important;">


  </div>

</div>


<div class="col-xs-12" style="padding-top: 10px;">

   <div class="box"> 

      <div class="box-body table-responsive"> 

<div class="available-course">


   <?php $form = ActiveForm::begin([

   'method' => 'get']); ?>

<div class="col-xs-12 col-lg-12 no-padding"> 

	<div class="col-xs-12 col-sm-4 col-lg-4">

    	<?= $form->field($searchModel, 'course_code') ?>

    </div>

    <div class="col-xs-12 col-sm-4 col-lg-4">

    	<?= $form->field($searchModel, 'course_name') ?>

    </div>

    <div class="col-xs-12 col-sm-4 col-lg-4">

            <?= $form->field($searchModel, 'course_category_id')->widget(Select2::classname(), [

                'data' => ArrayHelper::map(app\models\CourseCategories::find()->all(),'course_category_id','course_category_name'),

                'language' => 'en',

                'options' => ['placeholder' => 'Select Course Category ...'],


             //   'disabled'=>'true',

                'pluginOptions' => [

                    'allowClear' => true

                ],

            ]); ?>    	

    </div>   

</div>

<div class="col-xs-12 col-lg-12"> 

    <div class="form-group">

        <?= Html::submitButton('Click to Search', ['class' => 'btn btn-success']) ?>

    </div>

</div>


    <?php ActiveForm::end(); ?>


<!--<div class="col-xs-12 col-sm-4 col-lg-4">-->

<?= 

ListView::widget([

    'dataProvider' => $dataProvider,

    'options' => [

        'tag' => 'div',

        'class' => 'list-wrapper',

        'id' => 'list-wrapper',

    ],


    'layout' => "{pager}\n{items}\n{summary}",


    //'itemView' => '_list_item',

        'itemView' => function ($model, $key, $index, $widget) {

        return $this->render('_available-courses',['model' => $model]);

    },


    'itemOptions' => [

        'tag' => false,

    ],


    'pager' => [

        'firstPageLabel' => 'first',

        'lastPageLabel' => 'last',

        'prevPageLabel' => '<span class="glyphicon glyphicon-chevron-left"></span>',//'previous',

        'nextPageLabel' => '<span class="glyphicon glyphicon-chevron-right"></span>',//'next',

        'maxButtonCount' => 3,

        'options' => [

            'class' => ' pagination col-xs-12'

          //  'pageSize' => 2

        ]


    ],




]);

?>


<!--</div>-->




</div>


    <div class="col-xs-4 left-padding">


    </div>

    <div class="col-xs-4 left-padding">

        <?= Html::a(Yii::t('app', 'Add a New Course'), ['create'], ['class' => 'btn btn-block btn-primary']) ?>

    </div>


     </div>


   </div>

</div>




1 Like

I would consider using the following structure:




<div class="row">

    <div class="col-xs-12 col-sm-4 col-lg-4"> ... item ... </div>

    <div class="col-xs-12 col-sm-4 col-lg-4"> ... item ... </div>

    <div class="col-xs-12 col-sm-4 col-lg-4"> ... item ... </div>

    <div class="col-xs-12 col-sm-4 col-lg-4"> ... item ... </div>

    ...

</div>



So the main view would be:




...

<div class="row">

    <?= ListView::widget(...) ?>

</div>

...



And the item view would be:




<div class="col-xs-12 col-sm-4 col-lg-4">

    ...

    <?= DetailView::widget(...) ?>

</div>



I hope you get the idea. :)

1 Like

If you look at what I have in my code, I’ve tried to apply it but no result

Your item view has a "<div class="col-xs-12">" that wraps the whole thing.

You solved the problem.

Thanks so much.