Cviewlist

Yii 1.1 General Discussion
1

Hi,

I am new to Yii, and that is my first post , i want to arrange the images so that every 3 images will be shown in the same row, and i have

encountered a strange result, the images will be arranged as below diagram.

X X X

 X

X X

X X X

X X X

X X X

blank cell will be shown instead of the image.

here is my index view

<div style="width: 900px;">

<?php $this->widget(‘zii.widgets.CListView’, array(

'dataProvider'=&gt;&#036;dataProvider,


'itemView'=&gt;'_view',


'enablePagination' =&gt; true,


'pager' =&gt; array('pageSize' =&gt; '20','cssFile'=&gt; Yii::app()-&gt;baseUrl.'/protected/css/yiipager.css',),


'cssFile'=&gt; Yii::app()-&gt;baseUrl.'/protected/css/yiipager.css',


'summaryText'=&gt;'{page} of {pages}',

)); ?>

</div>

and here is my _view

<div class="div_container">

<a href=’<?=$data->href?>’ title=’<?=$data->title?>’>

<div class="div_image">

<img class="lazyimg" src="<?=$data->imgSrc?>" title="<?=$data->title?>" data-original="<?=$data->imgSrc?>" >

</div>

<div class=‘div_details’>

<div class=‘title’><b><?=$data->title?></b></div>

<div class=‘description’><?=$data->remark?></div>

</div>

</a>

<div></div>

here is my controller code

/*

lazyloading.min.js is the utility (javascript file) downloaded

lazy.js is the javascript only has few

*/

public function actionIndex()


{


	&#036;criteria = new CDbCriteria();


	&#036;baseUrl = Yii::app()-&gt;baseUrl; 


	&#036;cs = Yii::app()-&gt;getClientScript();


	&#036;cs-&gt;registerScriptFile(&#036;baseUrl.'protected/js/lazyloading.min.js');


	&#036;cs-&gt;registerScriptFile(&#036;baseUrl.'protected/js/lazy.js');


	&#036;cs-&gt;registerScriptFile(&#036;baseUrl.'protected/css/yiipager.css');





	&#036;criteria = new CDbCriteria();


	&#036;criteria-&gt;join =&quot;inner join rog_category on rog_category.id=`t`.categoryId&quot;;


	&#036;criteria-&gt;condition=&quot;rog_category.category='car' and complete=false&quot;;





	&#036;dataProvider=new CActiveDataProvider('Car', array('criteria' =&gt; &#036;criteria,));


	&#036;dataProvider-&gt;pagination-&gt;pageSize=15;


	&#036;this-&gt;render('index',array(


		'dataProvider'=&gt;&#036;dataProvider,


		'criteria'=&gt;&#036;criteria,


		'pagination' =&gt; array(


			'pageSize' =&gt; 15,


		),


	));


}

here is the yiipager.css

div.div_container{width: 300px; float: left;}

.lazyimg{width=100px;height=280px;}

ul.yiiPager{font-size:20px;border:0;margin:0;padding:0;line-height:100%;list-style-type: none;}

Please help.

I have also encounter another problem about UrlManager, and I will start a new post about that.

Thx your help.

2

I know what’s wrong, since image is not the same size, without specifying the container height will cause the strange result i have encountered.

that is the css ‘problem’.

here is the new css of the div container

div.div_container{

width: 300px;

height: 500px;

float: left;

}

hope it will help someone.