это первый раз, когда я использую виджет Yii2 GridView. Я попытался установить ширину столбца после прочтения некоторых ответов здесь, в 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']; }, ], ], ]); ?> Если вы хотите установить ширину для одного столбца, вы можете использовать headerOptions:
[ 'attribute' => 'attribute_name', 'headerOptions' => ['style' => 'width:20%'], ],
Это зависит от того, чего вы пытаетесь достичь. Но max-width с 20 пикселями, вероятно, не то, что вы на самом деле хотели. Попробуйте это с width :
[ 'class' => 'yii\grid\SerialColumn', 'contentOptions' => ['style' => 'width:100px;'], // not max-width ],
Это может быть результатом свойства css белого пространства , которое повлияет на ширину ячейки таблицы в зависимости от содержимого в ней. В моем проекте Yii2 у меня было:
.grid-view td { white-space: nowrap; }
Никто из советов, представленных здесь, не был полезен для меня. Но это было полезно:
.grid-view td { white-space:pre-line; // or just 'normal' }
вы должны установить его так:
<?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ [ 'attribute'=>'title', 'contentOptions' => ['style' => 'width:200px; white-space: normal;'], ], ] ] ); ?>
С помощью contentOptions вы можете установить параметры для всех td для столбца «title». В Site.css задано значение white-space для nowrap по умолчанию.
.grid-view td { white-space: nowrap; }
Но если ваш контент длиннее 200 пикселей, например, col будет расширяться по содержанию и игнорировать ваш.
Попробуйте просто Options :
[ 'class' => 'yii\grid\SerialColumn', 'options' => ['style' => 'max-width:20px;'], ],
Единственным решением, которое полностью решило проблему, было то, что было предложено https://stackoverflow.com/users/2053862/rostyslav-pylypenko : Вот трюк:
td { white-space:normal !important; }
Простое, но функциональное решение – создать CSS-настройку max-width для столбцов. !important является флаг, чтобы гарантировать, что это свойство не будет превышено.
td { max-width: 800px; white-space: normal !important; }
Затем вы просто зарегистрируете его в своем представлении.
$this->registerCssFile('css/tableColumnMaxWidht.css');
У нас есть и пример этой таблицы, работающей на этом изображении здесь .
Сначала добавьте опцию, например
GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'options' => [ 'style' => 'table-layout:fixed;' ],
после этого добавьте строки ниже
[ 'attribute' => 'news_description', 'contentOptions' => [ 'style' => 'width: 25%;' ], ],