I have my Listview in one (1) per row as shown below
7621
But I want it to be arranged in three (3) per row as shown in the diagram below
7622
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>