Question

这是我第一次使用Yii2 GridView Widget。我在stackoverflow上阅读了一些答案之后尝试设置列的宽度，但它对我不起作用，如果列的宽度不同（特别是第一个），我会很喜欢它。

我尝试使用'contentOptions'直接为第一列设置宽度，并使用外部CSS文件设置产品名称列。

有人可以告诉我是否有替代方案或者我做错了什么？

 <?= 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'];
            },
        ],
    ],
]); ?>

Answer 1

如果要为单列设置宽度，可以使用headerOptions：

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

Answer 2

你必须这样设置：

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

使用contentOptions，您可以为“title”列设置所有td的选项。在Site.css中，默认情况下将白色空间设置为nowrap。

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

但是，如果您的内容超过200像素，则col将按内容展开并忽略您的内容。

Answer 3

这可能是white-space css属性的结果，它会影响表格单元格的宽度，具体取决于其中的内容。在我的Yii2项目中，我有：

st

此处提供的建议中没有人对我没用。但这很有用：

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

Answer 4

首先添加类似

的选项

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

之后添加以下行

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

Answer 5

这取决于你想要达到的目标。但是具有20像素的curl -XPUT 'http://localhost:9200/testindex/_mapping/testmapping' -d ' { "testmapping" : { "properties" : { "birthdate" : { "type" : "date", "format": "dateOptionalTime" }, "name" : { "type" : "string" }, "age" : { "type" : "long" }, "amount" : { "type" : "double" } } } } '可能不是您真正想要的。试试max-width：

width

Answer 6

只使用Options：

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

Answer 7

完全解决问题的唯一解决方案是https://stackoverflow.com/users/2053862/rostyslav-pylypenko建议的解决方案：这是诀窍：

td {
  white-space:normal !important;
}

Answer 8

我简单但功能性的解决方案是为列创建CSS设置最大宽度。 !important标志用于确保此属性不会被覆盖。

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

然后，您只需在视图中注册即可。

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

我们在此图片中使用此表的示例here。

Yii2 GridView无法设置列宽

8 个答案: