lukBB
October 17, 2011, 8:15am
1
Hallo there !!
I was looking for some way to customize CListView. What I’d like to achieve is a way to add some css class for last view in a row . I mean i’d like to have 3 views rendered in a row(and that is easy to do), but I’d like to add custom css class to last view in each row. By default “_view” rendered by CListView has margin-right: XX, and I’d like to reset this margin for only last item in a row. I want all items in a row to fill whole page without any space left.
I did it using “for loop”, but I’d like to do it Yii-Way using CListView.
Do you have any ideas, thanks in advance
Regards
lukBB
zaccaria
October 17, 2011, 9:50am
2
You can set your own css in CListView with the property ‘cssFile’
lukBB
October 17, 2011, 12:08pm
3
Yes I know that, But I need to add custom css class only to last item in row
like this:
[item1] [item2] [item3]
[item4] [item5] [item6]
[item7] [item8] [item9]
and I’d like to add css class “last” to items: item3,item6,item9
thanks anyway
lukBB
November 8, 2011, 8:57am
4
Hi,
I have finally found an answer
<div class="<? echo ($index % 2 == 0) ? "first" : "last";?>" >
Hope it will help someone
regards
lukBB
jrpa
November 30, 2011, 5:43pm
5
lukBB:
Yes I know that, But I need to add custom css class only to last item in row
like this:
[item1] [item2] [item3]
[item4] [item5] [item6]
[item7] [item8] [item9]
and I’d like to add css class “last” to items: item3,item6,item9
thanks anyway
Hi! I also need a control that can display more than one item per row. How did you modify CListView here? Can you give some guidelines? Thanks!
lukBB
December 7, 2011, 8:26am
6
Hi you don’t have to modify CListView class, all you need to modify are your _view and css file. Here is what i have done:
My _view.php file:
<div class="<? echo ($index % 2 == 0) ? "first" : "last";?>" style="text-align:center;">
<?php
echo '<h4>'. CHtml::link(CHtml::encode($data->title), array('view', 'id'=>$data->id, 'title'=>$data->title), array('title'=>'Zwierzopedia - Encyklopedia - Świat Zwierząt '. $data->title)).'</h4>';
if($data->image != 'nophoto.jpg')
echo CHtml::link(CHtml::image(Yii::app()->baseUrl . '/images/wiki/' . $data->id .'/thumb/thumb_' . $data->id . '_'. $data->image, $data->title, array('width'=>'210px', 'height'=>'150px')), array('view', 'id'=>$data->id, 'title'=>$data->title));
else
echo CHtml::link(CHtml::image(Yii::app()->baseUrl . '/images/wiki/' . $data->image, '', array('width'=>'210px', 'height'=>'150px')), array('view', 'id'=>$data->id, 'title'=>$data->title));
?>
<hr/>
<div style="text-align:left;">
<?php
if($data->visits == NULL)
{
$data->visits = 0;
}
echo 'Data dodania: ' . date('d.m.Y ', $data->create_time) . ', Ilość wyświetleń: ' . $data->visits; ?>
</div>
</div>
And my css file part:
.first
{
width:318px;
display:inline;
float:left;
margin-right:20px;
border:1px solid #eee;
padding:10px;
margin-bottom: 10px;
}
.last
{
width:318px;
display:inline;
float:right;
margin-right:0px;
border:1px solid #eee;
padding:10px;
margin-bottom: 10px;
}
Output you can see here: http://www.milosnicyzwierzat.pl/zwierzopedia
This example is for two items per row, but if you need to display more, you can use $index parameter and with simple logic asign, for example, "last" css class to last item in a row.
Regards
in this post. To add custom css class to lets say first and last item in row you can use this simple line in your _view file :