Yii2 GridView cannot set column width

问题

this is the first time I am using the Yii2 GridView Widget. I have tried setting a column's width after reading some answers here on stackoverflow, but it just won't work for me and I would love it if the columns had different widths (especially the first one).

I have tried setting the width using 'contentOptions' directly for the first column and also with an external CSS file for the product name column.

Can someone please tell me if there is an alternative or if there is something I am doing wrong?

 <?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        [
            'class' => 'yii\grid\SerialColumn',
            'contentOptions' => ['style' => 'max-width:20px;'],
        ],

        [
            'format' => 'raw', 
            'label' => 'Image',
            'value' => function ($data) { 
                $url = $data->imgSrc;
                return Html::img($url, ['width' => '40px']);
            },
        ],

        [
            'attribute' => 'name',
            'format' => 'raw',
            'label' => 'Product name',
            'contentOptions' => function ($model, $key, $index, $column) {
                return ['class' => 'tbl_name'];
            },
        ],
    ],
]); ?>

回答1:

If you want set width for single column you can use headerOptions:

[
  'attribute' => 'attribute_name',
   'headerOptions' => ['style' => 'width:20%'],
],

回答2:

you have to set it like this:

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            [
                'attribute'=>'title',
                'contentOptions' => ['style' => 'width:200px; white-space: normal;'],
            ],
        ]
    ]
);
?>

With contentOptions you can set options to all td for the column "title". In Site.css is white-space set to nowrap by default.

.grid-view td {
    white-space: nowrap;
}

But if your content is longer than 200px for example, the col will be expand by content and ignores your with.

回答3:

First add Option like

GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'options' => [ 'style' => 'table-layout:fixed;' ],

after that add below lines

[
    'attribute' => 'news_description',
    'contentOptions' => [ 'style' => 'width: 25%;' ],
],

回答4:

This could be the result of white-space css property, that will affect the table cell width depending on content in it. In my Yii2 project I had:

.grid-view td {
    white-space: nowrap;
}

No one from advices provided here was not usefull for me. But this was usefull:

.grid-view td {
  white-space:pre-line; // or just 'normal'
}

回答5:

It depends on what you trying to achieve. But max-width with 20 pixels is probably not what you actually wanted. Try it with width:

[
    'class' => 'yii\grid\SerialColumn',
    'contentOptions' => ['style' => 'width:100px;'],  // not max-width
],

回答6:

Try with just Options:

 [
        'class' => 'yii\grid\SerialColumn',
        'options' => ['style' => 'max-width:20px;'],
 ],

回答7:

The only solution that has entirely solved the problem was the one suggested by https://stackoverflow.com/users/2053862/rostyslav-pylypenko: Here is the trick:

td {
  white-space:normal !important;
}

回答8:

I simple but functional solution is to create a CSS setting a max-width for the columns. The !important flag is to ensure that this property doesn't get overrriden.

td {
  max-width: 800px;
  white-space: normal !important;
}

Then, you just register it in your view.

$this->registerCssFile('css/tableColumnMaxWidht.css');

We have and example of this table working in this image here.

来源：https://stackoverflow.com/questions/30976065/yii2-gridview-cannot-set-column-width

标签

php

gridview

yii2