CODEWITHSUNDEEP
phpgridviewyiiwidth
iProgrammer
iProgrammer

Reputation: 766

How to change GridView column size in YII?

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?

Upvotes: 3

Views: 27000

Answers (5)

Bhargav Katakpara
Bhargav Katakpara

Reputation: 319

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

Upvotes: 4

Paramone
Paramone

Reputation: 2724

Simply add

'contentOptions' =>['style' => 'width:30px'],

-- For example:

'columns' => [
        [
            'attribute' => 'product.name',
            'contentOptions' =>['style' => 'width:30px'],
        ],

That should do the trick!

Upvotes: 0

Dzhuneyt
Dzhuneyt

Reputation: 8691

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"]',
);

Upvotes: 2

rodrigovr
rodrigovr

Reputation: 454

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

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

Upvotes: 7

adamS
adamS

Reputation: 600

i noticed with cgridview in the tags there is an id attribute id="table-name_c0" id="table-name_c1" etc. you could hook into this and the .filters class for the filter width. e.g.

#table-name table-name_c0 {
    width: 30px;
}

#table-name .filters:nth(0) {
    width:30px;
}

where c0 and :nth(0) are the same number. it's slightly hacky but what you are trying to achieve is also slightly hacky imho

Upvotes: 0

Related Questions