Yii2 GridView kann die Spaltenbreite nicht setzen

Question

Dies ist das erste Mal, dass ich das Yii2 GridView Widget verwende. Ich habe versucht, die Breite einer Spalte zu setzen, nachdem ich einige Antworten hier auf stackoverflow gelesen habe, aber es wird einfach nicht für mich funktionieren und ich würde es lieben, wenn die Spalten unterschiedliche Breiten hätten (besonders die erste).

Ich habe versucht, die Breite mit 'contentOptions' direkt für die erste Spalte und auch mit einer externen CSS-Datei für die Spalte Produktname zu setzen.

Kann mir bitte jemand 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']; 
      }, 
     ], 
    ], 
]); ?> 

Answer 1

Versuchen mit nur Options:

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

Answer 2

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

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

Answer 3

Wenn Sie setzen Breite wollen für einzelne Spalte können Sie headerOptions verwenden:

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

Answer 4

Dies ist das Ergebnis von white-space CSS-Eigenschaft sein könnte, das wird die Tabelle Zellenbreite beeinflussen je auf Inhalt darin. In meinem Yii2 Projekt hatte ich:

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

Niemand von den hier angegebenen Ratschlägen war nicht nützlich für mich. Aber das war sehr nützlich:

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

Answer 5

Sie haben es wie folgt festgelegt:

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

Mit contentOptions Sie Optionen für alle td für die Spalte „Titel“ eingestellt werden. In Site.css ist der Leerraum standardmäßig auf nowrap eingestellt.

Aber wenn Ihr Inhalt länger als 200px zum Beispiel ist, wird die Spalte nach Inhalt erweitert und ignoriert Ihre mit.

Answer 6

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

td { 
    white-space:normal !important; 
} 

Answer 7

ich einfache, aber funktionale Lösung ist eine CSS-Einstellung einer max-width für die zu schaffen Säulen. 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 Sicht.

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

Wir haben und Beispiel dieser Tabelle in diesem Bild arbeiten here.

Answer 8

Erste Add Option wie

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

danach unter Zeilen hinzufügen

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