How to change GridView column size in YII?

Question

Im trying change my GridView column width. This is my code:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'prefixs-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'columns' => array(
        array(
            'name' => 'id',
            'header' => 'No.',
            'htmlOptions' => array('class' => 'center'),
        ),
        array(
            'name' => 'pfx',
            'htmlOptions' => array('width' => 30),
        ),
        array(
            'class' => 'CButtonColumn',
        ),
    ),
)); ?>

When i run 'pfx' columns width must be changed to 30, but width is same. How i can change width of column? Any ideas?

Solution 1

If you do not want to use a separated CSS definition you should do:

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

Solution 2

'columns' => [      
    [
         'headerOptions' => ['width' => '150'],
         'attribute' => 'name',
         'format' => 'raw',
          'value' => 'name'
    ],
]

Solution 3

There are multiple ways to approach this issue.

You can widen the cell's contents (cells of individual rows):

$columns[] = array(
    'header'=>'Name',
    'value'=>'$data["name"]',
    'htmlOptions'=>array('style'=>'width: 150px')
);

Sometimes you may want to widen the column header instead of the individual rows' cells:

$columns[] = array(
    'header'=>'Name',
    'value'=>'$data["name"]',
    'headerHtmlOptions'=>array('style'=>'width: 150px')
);

Widening the header is the preferred option, but even if you do that, sometimes it doesn't work as expected.

If this is the case, you can go my personal preferred way and widen the contents of the header cell. The widening will be inherited by the rows below it as well.

$columns[] = array(
    'header'=>'<div style="width:150px;">Name</div>',
    'value'=>'$data["name"]',
);

Comments

[adamS]

php 'htmlOptions' => array('class' => 'width30'), css .width30 { width: 30px; }

[Let me see]

possible duplicate of stackoverflow.com/questions/2902723/…

[iProgrammer]

I used class but not helped...

[iProgrammer]

i think filters input not changes size. when i delete filter it works... but i must use a filter

[iProgrammer]

i used this too. but filters input not changed.

[lafor]

htmlOptions don't get applied to GridView's header and filters rows, so this won't work if you're trying to make the column narrower than the content of either of them.

[rodrigovr]

CDataColumn also has a filterHtmlOptions property. I added it to the answer.

[Anders]

Please avoid code only answers! It is preferable to also shortly explain what the code does or why it works.