it-swarm.com.de

Yii2 GridView kann die Spaltenbreite nicht einstellen

dies ist das erste Mal, dass ich das Yii2 GridView Widget verwende. Ich habe versucht, die Spaltenbreite einzustellen, nachdem ich einige Antworten hier bei stackoverflow gelesen habe, aber es funktioniert nicht für mich und ich würde es lieben, wenn die Spalten unterschiedliche Breiten hätten (besonders die erste).

Ich habe versucht, die Breite mithilfe von 'contentOptions' direkt für die erste Spalte und auch mit einer externen CSS-Datei für die Produktnamensspalte festzulegen.

Kann mir jemand bitte sagen, ob es eine Alternative gibt oder ob ich etwas falsch mache?

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

Wenn Sie die Breite für eine einzelne Spalte festlegen möchten, können Sie headerOptions verwenden: 

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

sie müssen es so einstellen:

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

Mit contentOptions können Sie Optionen auf alle td für die Spalte "title" ..__ setzen. In Site.css ist der Leerraum standardmäßig auf nowrap gesetzt.

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

Wenn Ihr Inhalt jedoch beispielsweise länger als 200 Pixel ist, wird die Spalte um den Inhalt erweitert und ignoriert den Inhalt mit.

7
freesh

Zuerst Option hinzufügen 

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

anschließend fügen Sie die Zeilen ein

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

Dies könnte das Ergebnis der white-space css -Eigenschaft sein, die sich je nach Inhalt der Tabellenzellenbreite auswirkt. In meinem Yii2-Projekt hatte ich:

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

Niemand aus den hier gegebenen Ratschlägen war für mich nicht nützlich. Aber das war nützlich:

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

Es hängt davon ab, was Sie erreichen wollen. Aber max-width mit 20 Pixeln ist wahrscheinlich nicht das, was Sie eigentlich wollten. Versuchen Sie es mit width:

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

Die einzige Lösung, die das Problem vollständig gelöst hat, war die von https://stackoverflow.com/users/2053862/rostyslav-pylypenko : Hier ist der Trick:

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

Eine einfache, aber funktionale Lösung besteht darin, ein CSS zu erstellen, das eine maximale Breite für die Spalten festlegt. Das Flag !important soll sicherstellen, dass diese Eigenschaft nicht überschrieben wird.

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

Dann registrieren Sie es einfach in Ihrer Ansicht.

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

Wir haben ein Beispiel für diese Tabelle, die in diesem Bild hier arbeitet.

Versuchen Sie es mit nur Options:

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