Using CListView to display items next to each other (in columns)

You are viewing revision #1 of this wiki article.
This is the latest version of this article.

When using CListView to display multiple views next to each other, we can use the $index variable inside the viewFile to achieve this. As far as i know there is no extension or out-of-the-box functionality for this, so we need to apply a little hack:

Assume we use twitter bootstrap, we have this html structure to be generated:

<div class="container">
<div class="span12">
<div class="row">
<div class="span4">
CONTENT
</div>
<div class="span4">
CONTENT
</div>
<div class="span4">
CONTENT
</div>
</div>
</div>
</div>

and so on. Do the following in your viewFile:

<?php $pageSize = $widget->dataProvider->getPagination()->pageSize; ?>

<?php if($index == 0) echo '<div class="row">'; ?>
<div class="span3">

// Your content goes here

</div>

<?php if($index != 0 && $index != $pageSize && ($index + 1) % 4 == 0)
	echo '</div><div class="row">'; ?>

<?php if(($index + 1) == $pageSize ) echo '</div>'; ?>

Make sure to adjust the %4 and span3 to how much columns you want

2 columns: span:6 %: 2
3 columns: span:4 %: 3
4 columns: span:3 %: 4
6 columns: span:2 %: 6

and so on.

4 0
6 followers
Viewed: 17 767 times
Version: Unknown (update)
Category: Tips
Written by: thyseus
Last updated by: thyseus
Created on: May 22, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history