Clistview

I am using CListView


 $this->widget('zii.widgets.CListView', array(

            'dataProvider'=>$dataProvider,

            'itemView'=>'_list', 



and my _list.php has got html to display data for ONE record

So in the output , the data is listed one by one//

like this

Record1

Record2

Record3

Record4

But how can I show 4 sets in one row as below

Record1 Record2 Record3

Record4 Record5 Record6

Show more link

You can wrap single record in div and then set the css style for it with float:left and width.

The problem is , CListview shows records in one single column. I need to show the record in blocks. I think I need to do something in the _list.php but not sure what.

I just told you… In _list.php put the data in <div> with class like




<div class="myObviousCListViewSingleRecord">

...

</div>



Now in your .css file add at least:




.myObviousCListViewSingleRecord {

    float:left;

}



E.g if my database table is :

ID Col1 Col2

1 Val1 Val2

2 Val1 Val2

3 Val1 Val2

4 Val1 Val2

5 Val1 Val2

6 Val1 Val2

When I render CListView’s _List.php from item view , it shows me as below

Record 1&Values

Record 2&Values

Record 3&Values

Record 4&Values

Record 5&Values

Record 6&Values

as you see above, its shown in a LIST!

How can I show it in a horizontal way as below where I can show at least 3 records in one row

Record 1&Values Record 2&Values Record 3&Values

Record 4&Values Record 5&Values Record 6&Values

Record 7&Values Record 8&Values Record 9&Values

Record 10&Values Record 11&Values Record 12&Values

Paste here your _list.php

Alright here is the view calling the _List





 $this->widget('zii.widgets.CListView', 

                array(

                      'dataProvider'=>$dataProvider,

                      'enablePagination'=>true,

                      'itemView'=>'_list',   // <===== _List.php gets ONE record from _list.php and displays it on the screen.

             

                      )


                    );



_List.php





<div class="container" >

    <div class="row" style="float: left;">

        <ul class="thumbnails">

            <li class="span4">

              <div class="thumbnail">

                <img src= alt="ALT NAME">

                <div class="caption">

                  <h3><?php echo CHtml::encode($data->getAttributeLabel('Header')); ?> </h3>

                  <p>Description</p>

                  

                </div>

              </div>

            </li>

             

        </ul>

    </div>

</div>



Are you sure this is all? Why do you start new list <ul> for every record when there is only one list element in it?

Anyway you can do this:




<div class="container" style="float:left; width:33%">

    <div class="row">



This does not work… all it does is to switch all the list more to left, i see records as below

Record 1

Record 2

Record 3

Record 4

I want to show records in a horizontal manner

Record 1 Record 2 Record 3 Record 4 Record 5

Record 6 Record 7 Record 8 Record 9 Record 10

Make sure the style of wrapping div is not overridden by other styles, same for the elements inside. Use Firebug or other similar tool to check it easier way.

Well, do you have a simple example where you show data from a data table in a horizontal top to bottom fashion? rather than in a list?

For example (view):


<div style="float:left"><?php echo CHtml::encode($data->myAttribute); ?></div>

Yepp!!!

Works great :) But both records look like sticked to each other.

E.g

Record1Record2Record3…

How can I control how many records per row and to have space/gaps between them?

For example - use css style with padding or margin. You can add with to control number of divs in one row like 33% for 3 in row.

Thankx Bizley!