Yii2 GridView non può impostare la larghezza della colonna

Question

questa è la prima volta che utilizzo il widget GridView di Yii2. Ho provato a impostare la larghezza di una colonna dopo aver letto alcune risposte qui su StackOverflow, ma semplicemente non funzionerà per me e mi piacerebbe che le colonne avessero larghezze diverse (specialmente la prima).

Ho provato a impostare la larghezza utilizzando 'contentOptions' direttamente per la prima colonna e anche con un file CSS esterno per la colonna del nome del prodotto.

Qualcuno può dirmi se c'è un'alternativa o se c'è qualcosa che sto sbagliando?

<?= 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

Prova con un solo Options:

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

Answer 2

Dipende da ciò che si cerca di raggiungere. Ma lo max-width con 20 pixel non è probabilmente quello che volevi davvero. Da provare con width:

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

Answer 3

Se si desidera la larghezza impostata per singola colonna è possibile utilizzare headerOptions:

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

Answer 4

Questo potrebbe essere il risultato della proprietà white-space css, che interesseranno la larghezza della cella di una tabella a seconda sul contenuto in esso. Nel mio progetto Yii2 avevo:

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

Nessuno da consigli forniti qui non era utile per me. Ma questo è stato utile:

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

Answer 5

si devono impostare in questo modo:

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

Con contentOptions è possibile impostare le opzioni per tutti i td per il "titolo" della colonna. In Site.css lo spazio bianco è impostato su nowrap per impostazione predefinita.

Ma se il contenuto è più lungo di 200 px, ad esempio, la colonna verrà ampliata per contenuto e ignorata.

Answer 6

L'unica soluzione che ha del tutto risolto il problema è stato quello suggerito da https://stackoverflow.com/users/2053862/rostyslav-pylypenko: Ecco il trucco:

td { 
    white-space:normal !important; 
} 

Answer 7

io soluzione semplice ma funzionale è quello di creare l'impostazione di un max-width per un CSS colonne. Il flag !important garantisce che questa proprietà non venga annullata.

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

Quindi, è sufficiente registrarlo nella visualizzazione.

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

abbiamo e esempio di questo piano di lavoro in questa immagine here.

Answer 8

Prima Opzione aggiuntiva come

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

dopo che aggiungono di seguito le linee

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