Search code examples
phpdatagridviewyii2word-wrap

How to Text Wrap - DataGridView Yii2 framework


I have been trying to find an answer in the internet but i can find anything. I am quite new in web developing so it is a problem for me to figure it out.

Problem: Text goes beyound cells when i set max-width for any value. I need to find a way to wrap it. Is it possible to do this by widget properties? Thank you for answer

  <?php
     echo GridView::widget([
         'dataProvider' => $provider,
         'options' => ['style' => 'max-height:30px;',
                                    'max-width:10px;',
                      ],
         'columns' => [
             ['class' => 'yii\grid\SerialColumn',
                 'contentOptions'=>['style'=>'width: 30px;']],
             //subject
             [
                 'attribute' => 'subject',
                 'format' => 'text',

                 'label' => 'Subject',
                 'contentOptions'=>[
                     'style'=>
                         ['width: 10px;',],

                 ]
             ],
             //body
             [
                 'attribute' => 'body',
                 'format' => 'text',
                 'label' => 'Body',
                 'contentOptions'=>['style'=> 'max-width: 100px;', 'height: 100px']
             ],
             ['class' => 'yii\grid\ActionColumn',
                 'controller'=>null,
                 'header'=>'Action',
                 'headerOptions' => ['width' => '70'],
             ],
         ],
         'tableOptions' =>['class' => 'table table-striped table-bordered'],
     ]);
?>

enter image description here


Solution

  • Your style declaration is wrong. Yii2 uses cssStyleFromArray to generate the html style tag attributes. The correct format is an array of key-value pairs for each property:

    'contentOptions' => ['style' => ['max-width' => '100px;', 'height' => '100px']]
    

    Having said that, it would be better to create a new css rule in your stylesheet and add a class to the column:

     'contentOptions' => ['class' => 'text-wrap']