How to fit a CGridView into a CJuiTab?

Yii 1.1 General Discussion
1

Hi there,

I have a CGridView inside a CJuiTab which works fine so far. However, in some cases the CGridView gets quite wide as there can be many columns. In those cases the Grid just runs over the edge of the page.

This is what it looks like for example:

3016

Grid.png

I’m trying to find a way to fit the CGridView inside the Tab-area, ideally with a horizontal scrollbar.

Has anyone done something similar before? How would I go about doing this?

Many thanks!

2

This sounds like a CSS issue. I’d suggest looking at


overflow: auto;

for your stylesheet. You’ll have to figure out which DIV container to apply it to.

Check out: CSS Overflow Property

3

Thanks a lot for that hint. It was exactly what I was looking for :D

You can just add the ‘overflow’ to the htmlOptions when you create the tabs. Didn’t even have to change any style sheet.


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

		'tabs'=>$tabs,

		// additional javascript options for the tabs plugin

		'options'=>array(

				'collapsible'=>false,

				'selected'=>$selected,

				),

		'htmlOptions'=>array('style'=>'width:auto;overflow:auto;'

		),

));