web-dev-qa-db-fra.com

Yii2 GridView ne peut pas définir la largeur de la colonne

c'est la première fois que j'utilise le widget Yii2 GridView. J'ai essayé de définir la largeur d'une colonne après avoir lu certaines réponses ici sur stackoverflow, mais cela ne fonctionnera tout simplement pas pour moi et j'aimerais que les colonnes aient des largeurs différentes (en particulier la première).

J'ai essayé de définir la largeur en utilisant 'contentOptions' directement pour la première colonne et également avec un fichier CSS externe pour la colonne du nom du produit.

Est-ce que quelqu'un peut me dire s'il y a une alternative ou s'il y a quelque chose que je fais mal?

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

Si vous souhaitez définir la largeur d'une colonne, vous pouvez utiliser headerOptions: 

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

vous devez le définir comme ceci:

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

Avec contentOptions, vous pouvez définir des options sur tout td pour la colonne "title" . Dans Site.css, l'espace blanc est défini sur nowrap par défaut.

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

Mais si votre contenu est supérieur à 200 px par exemple, le col sera développé par contenu et ignorera votre avec.

7
freesh

Ajoutez d'abord une option comme 

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

après cela ajouter ci-dessous les lignes

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

Cela pourrait être le résultat de la propriété white-space css, qui affectera la largeur de la cellule du tableau en fonction du contenu. Dans mon projet Yii2, j'avais:

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

Personne des conseils fournis ici n'était pas utile pour moi. Mais c'était utile:

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

Cela dépend de ce que vous essayez d'atteindre. Mais max-width avec 20 pixels n’est probablement pas ce que vous vouliez réellement. Essayez-le avec width:

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

La seule solution qui ait entièrement résolu le problème est celle proposée par https://stackoverflow.com/users/2053862/rostyslav-pylypenko : 

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

Une solution simple mais fonctionnelle consiste à créer un CSS définissant une largeur maximale pour les colonnes. L'indicateur !important permet de s'assurer que cette propriété n'est pas surchargée.

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

Ensuite, il vous suffit de l’inscrire à votre vue.

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

Nous avons et exemple de cette table travaillant dans cette image ici .

0
Paulo Rodrigo Martins

Essayez avec juste Options:

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