Scrollable Gridview

Hi everybody,

Is there any way to make a fixed height gridview scrollable when you display tons of row ??

First I used this extension it works well but css is managed by the javascript… impossible to handle it correctly I have many problems of width between columns and header… they are all the time shifted… I tried many things to correct that but I finally gave up.

Then I tried simply to put my gridview in a div with a fixed height and “overflow-y:auto” css style… but here again it doesn’t work… div is well 500px big… but table goes over and no scroll appears…

So is there other way to do it ? or have you an Idea ??

I searched a lot on yii website but I didn’t find anything interesting except the extension I talked about. Almost all topics I found were about infinite scroll (like on twitter) but I want a simple one.


Normally the overflow-y is enough. Can you share your layout and view?

sure :

view for cgridview widget:

<div class="output">


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




  'selectableRows' => 2,



      'class' => 'CCheckBoxColumn',












layout :

<div id="content" class="span-16">

		<?php echo $content; ?>

	</div><!-- content -->



<?php $this->endContent(); ?>

for the interesting part…

Shouldn’t I apply the overflow on tbody of the gridview instead ?

take a look at this

I didn’t try it myself yet

Your link looks interesting but what is the connection with my topic ? it doesn’t suggest a way to get a gridview scrollable

I can’t test it right now but have you tried moving the overflow-y and the height to your container div instead of the widget?

Yep, I tried many things, every way, but I don’t get it work :(

I’ve just tested and it works on my Safari (and I bet on FF and Chrome as well):

<div class="output" style="height: 500px; overflow-y: auto">


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





Unless you have some other styling applied to your "output" CSS class. Can you post a screenshot?

if you just want to make your gridview scrollable it’s a simple task with css but fixing the header has some issue so I thought it’s fixed header gridview may be usefull for you.

Thanks all for reply, it finally works, I had to set a width, if not the div left screen to go on right side far away…

You can share your code?

Help me ?

Thank you!