Yii Framework Forum: Listview three (3) by Row - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Listview three (3) by Row

#1 User is offline   folumike 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 162
  • Joined: 27-November 14

Posted 06 March 2018 - 05:44 AM

I have my Listview in one (1) per row as shown below
Attached File  listview column.PNG (87.33K)
Number of downloads: 6

But I want it to be arranged in three (3) per row as shown in the diagram below
Attached File  listview row.PNG (141.48K)
Number of downloads: 7

How do I achieve this


View


_available-courses

<?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>	



available courses

<?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>


0

#2 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 3,642
  • Joined: 16-February 11
  • Location:Japan

Posted 06 March 2018 - 09:23 AM

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

#3 User is offline   folumike 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 162
  • Joined: 27-November 14

Posted 07 March 2018 - 06:38 AM

View Postsoftark, on 06 March 2018 - 09:23 AM, said:

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. :)


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

#4 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 3,642
  • Joined: 16-February 11
  • Location:Japan

Posted 07 March 2018 - 08:50 AM

View Postfolumike, on 07 March 2018 - 06:38 AM, said:

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.

Quote

_available-courses
<?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">  
...


1

#5 User is offline   folumike 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 162
  • Joined: 27-November 14

Posted 07 March 2018 - 09:00 AM

View Postsoftark, on 07 March 2018 - 08:50 AM, said:

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


You solved the problem.
Thanks so much.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users