web-dev-qa-db-ja.com

Yii2 GridViewは列幅を設定できません

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'];
            },
        ],
    ],
]); ?>
phpgridviewyii2
12
user2997695

単一の列の幅を設定する場合は、headerOptionsを使用できます。

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

最初にオプションを追加します

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

その後、以下の行を追加します

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

次のように設定する必要があります。

<?= 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ピクセルより長い場合、列はコンテンツごとに展開され、withは無視されます。

7
freesh

これは white-space cssプロパティの結果である可能性があり、その内容に応じてテーブルのセル幅に影響します。私のYii2プロジェクトでは、次のことができました。

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

ここで提供されたアドバイスから誰も私にとって役に立たなかった。しかし、これは便利でした：

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

何を達成しようとしているかによって異なります。だが max-width 20ピクセルの場合は、おそらく実際に必要なものではありません。 widthで試してください：

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

問題を完全に解決した唯一の解決策は、 https://stackoverflow.com/users/2053862/rostyslav-pylypenko によって提案されたものでした：ここにトリックがあります：

td {
  white-space:normal !important;
}
0
Rev

私はシンプルですが機能的なソリューションは、列の最大幅を設定するCSSを作成することです。 !importantフラグは、このプロパティがオーバーライドされないようにするためのものです。

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

次に、ビューに登録します。

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

この画像で動作するこのテーブルの例と here があります。

0
Paulo Rodrigo Martins

Optionsだけで試してください：

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