nerburish/yii2-match-height-view

ListView widget improved to use Jquery Match Height (https://github.com/liabru/jquery-match-height)

Yii2 MatchHeight ListView Widget

http://nerburish.com/yii2-matchheight-listview-widget/ en 🇪🇸, _(*1)

ListView widget improved to use Jquery MatchHeight.js (http://brm.io/jquery-match-height/), _(*2)

Demo Screenshot: , _(*3)

Installation

The preferred way to install this extension is through composer., _(*4)

Either run, _(*5)

php composer.phar require --prefer-dist nerburish/yii2-match-height-view "dev-master"

or add, _(*6)

"nerburish/yii2-match-height-view": "dev-master"

to the require section of your composer.json file., _(*7)

Usage

The usage is similar to default ListView Widget (http://www.yiiframework.com/doc-2.0/yii-widgets-listview.html), _(*8)

You just need a dataProvider and prepare the item template for your model., _(*9)

In clientOptions you can pass the MatchHeight.js options to modify the plugin behavior (see https://github.com/liabru/jquery-match-height#options), _(*10)

You can also attach a cssFile for styling the grid., _(*11)

Exemple:, _(*12)

We have this model:, _(*13)

class MyModel extends \yii\base\Theme
{
    public $id;

    public $title;

    public $description;
}

And this item template named _item.php:, _(*14)

<h3><?= $model->title ?></h3>
<p><?= $model->description ?></p>

Then in our view, we run the widget:, _(*15)

<?php echo \nerburish\matchheight\MatchHeightView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_item',
    'cssFile' => [
        "@web/css/grid-demo.css"        
    ]
]) ?>

The css used for the demo:, _(*16)

/* ---- grid ---- */
.grid {
  box-sizing: border-box;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */
.grid-item {
  width: 24%;
  padding: 10px;
  margin: 0.5%;
  float: left;
  background: #e4e4e4;
  border-radius: 5px;
}

You may also be interested in Masonry.js ListView widget: https://github.com/nerburish/yii2-masonry-view, _(*17)