I Need To Widen Cgridview Column Width

Yii 1.1 General Discussion
1

Hello,

I need to widen CGridView column width for the “notes” field and I’ve checked out the Class reference and a discussion snippet in the forum on doing this, but I can’t get the following to work for my admin.php view:




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

	'id'=>'tbl-contacts-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'columns'=>array(

		'id',

 		'contactType',

		'startTime',

		'endTime',

		'duration',

		'site',

		'prefix',

		'firstName',

		'lastName',

		'suffix',

		'phone1',

		'ext1',

		'phone2',

		'ext2',

		'email',

		'subject',

		array(

		    'name'=>'notes',

		    'htmlOptions'=>array('width'=>'40'),

		),

		'followUp',

		

		array(

			'class'=>'CButtonColumn',

		),

	),

)); ?>

Any suggestions or workarounds?

2

You only need to set the width on first cell in a column, the rest have to keep it the same. Use the headerHtmlOptions property:




'headerHtmlOptions'=>array('style'=>'width: 20em;'),
3

I replaced my previous code with the following, but that didn’t work either:




                ...


		array(

		'name'=>'notes',

		'headerHtmlOptions'=>array('style'=>'width: 40em;'),

		),


                ...

When you say I need to set the width on first cell in a column, do you mean a cell containing data? Do I also need to set ‘value’=>’’?

4

check also with firebug and tell us what css rules applied on this column.

5

The first cell is the one in the first row. The whole column must be same width, so you don’t need to specify width in other cells as it’s going to be ignored anyway.

If you have filters enabled and their position is set to ‘header’ so they are rendered above each column’s header you need to use filterHtmlOptions instead of headerHtmlOptions because that is the first row.

If you won’t specify the ‘value’ attribute the value will be read from an attribute specified in ‘name’.

6

Looks like the following also failed to make, though set a lot wider:




                ...

		

		array(

		'name'=>'notes',

		'filterHtmlOptions'=>array('style'=>'width: 400px;'),

		),

		

                ...

As for Firebug, I’m not sure how to use it, but I loaded and opened it. I right-clicked on the “notes” header and selected “Inspect with Firebug”. That gave me 62px for that column appearing on the page. I guess something is being overwritten, but I don’t know enough yet to track it down.

7

try this you can set any css on CHtml::tag




array(

                        'name' => 'Associated Events',

                        'type' => 'raw',

                    	 'value' => 'CHtml::tag("div",  array("style"=>"text-align: center;cursor:pointer" ,"onclick"=>"setchanges({$data["id"]})","id" => "{$data["id"]}","href"=>"javascript:void(0);") ,

                                                    								CHtml::tag("img", array( "src" => "'.Yii::app()->request->baseUrl . '/images/images.jp"))

                            )',

                    ),
8

mmm … 62px. can you trace what is the selector that apply this rule ?

9

This could be because other columns don’t have width set and the browser adjusts the dimensions somehow. Try out different table layout mechanisms by settings the table-layout property.