¿Qué es MatchHeight ListView para yii2?

Es una extensión del widget MatchHeight  de yii2 que implementa el plugin Jquery MatchHeight.js. MatchHeight ListView permite que los elementos de un lista tengan todos las misma altura.

Instalación

Para realizar la instalación mediante composer:

Ejecutando:

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

O también añadiendo la siguiente línea en la sección “requiere” del archivo composer.json

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

Uso

El uso es similar al widget ListView de yii2

Sólo se necesita un dataProvider y preparar la vista del modelo.

En el parámetro clientOptions se pueden pasar las opciones del plugin MatchHeight.js para modificar su comportamiento original. Puedes consultar las opciones disponibles aquí: (https://github.com/liabru/jquery-match-height#options)

Mediante el parámetro “cssFile” se puede añadir la ruta de un archivo css para darle estilo al widget.

Ejemplo

Tenemos el modelo de ejemplo MyModel:

class MyModel extends \yii\base\Model
{
	public $id;
	
	public $title;
	
	public $description;
}

Seguidamente en el template del elemento item.php tenemos lo siguiente:

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

Finalmente, en la vista añadimos el widget:

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

A continación, el css usado para la demo:

/* ---- 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;
}