Yii2 GridView无法设置列宽

这是我第一次使用Yii2 GridView Widget。我试过在阅读stackoverflow的一些答案后尝试设置列的宽度，但它不适用于我，如果列宽度不同（特别是第一个），我会喜欢它。Yii2 GridView无法设置列宽

我已经尝试使用'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']; 
      }, 
     ], 
    ], 
]); ?>

来源

2015-06-22 user2997695

尝试只用Options：

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

来源

2015-06-22 09:14:45 Chinmay

谢谢你的快速答复，但不幸的是，这不会为我工作（我忘了说我做尝试之前，只是再试一次，我得到了同样的结果），我真的不明白问题可能是什么。 – user2997695

它为我工作。你检查过萤火虫吗？该物业是否适用？ – Chinmay

我想它确实如此，我只查看了页面源代码，而且好像在相应的td标签中添加了样式。我还注意到，当删除网格的标题部分时，它确实起作用，但这不是我所需要的，因为您可以使用收听器进行排序。最后，在检查表格的CSS时，我注意到了layout-table：fixed，并且我为该表格添加了一个新类并设置了layout-table：inherit。我知道这是一种解决方法，但它似乎以我需要的方式工作。仍然不知道为什么其他解决方案不起作用。不过谢谢您的帮助！ – user2997695

这取决于你想要达到的目的。但max-width与20像素可能不是你真正想要的。与width尝试：

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

来源

2015-06-22 12:16:49 robsch

不幸的是，这也行不通。 – user2997695

好的。那么请告诉我们你想要达到的目标以及你目前得到或看到的内容。你有哪些宽度？你有一个公共URL吗？ – robsch

我最终通过使用一种解决方法来管理我想做的事情：在检查表格的CSS时，我注意到了layout-table：fixed，并且我为表格添加了一个新类并设置了layout-table：inherit。我之前看到的所有列都有相同的宽度，所以如果我说2列，每列宽度为50％，3列 - 33％，并继续。 – user2997695

如果您想为单个列设置宽度可以使用headerOptions：

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

来源

2016-08-04 09:47:36 sambua

这可能是white-space CSS属性的结果，这将取决于影响表单元格的宽度关于它的内容。在我Yii2项目，我必须：

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

从这里提供的建议没有一个不是有用的我。但是，这是有用的：

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

来源

2016-11-25 19:23:47

哦，伙计，你是冠军！唯一完全解决问题的解决方案。 – Rev

你必须将其设置是这样的：

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

随着contentOptions您可以设置选项对所有TD为列“称号”。在Site.css中，默认情况下是将空白设置为nowrap。

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

但是，如果你的内容是不是200像素例如更长的时间，山坳将内容扩大，并忽略你。

来源

2017-02-23 15:03:46 freesh

已经完全解决了这个问题是在一个由https://stackoverflow.com/users/2053862/rostyslav-pylypenko提出的唯一的解决办法：这是使用方法：

td { 
    white-space:normal !important; 
}

来源

2017-04-19 02:23:47 Rev

我简单而实用的解决方案是创建一个CSS设置一个最大宽度为列。 !important标志是为了确保该属性不会被覆盖。

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

然后，您只需在您的视图中注册它。

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

我们有这个表格的例子使用图片here。

来源

2017-07-07 13:45:59

首先添加选项像

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

后

下面添加行

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

来源

2017-12-09 19:34:16 Saeed

Yii2 GridView无法设置列宽

回答

相关问题