wrap text on the gridview column

Dear All,

I am using kartik yii2 grid extension link, the thing is in column "name". I have some entry very long, it makes the grid shows the horizontal scroll. I wanted to make the fit horizontally, I do not mind to have more than a line in the name column. How can I do it?

the index.php entry is as follow:

<div class="work-index">

    <div id="ajaxCrudDatatable">

        <?=

        GridView::widget([

            'id' => 'crud-datatable',

            'dataProvider' => $dataProvider,

            'filterModel' => $searchModel,

            'pjax' => true,

            'columns' => require(__DIR__ . '/_columns.php'),

            'pager' => [

                'options' => ['class' => 'pagination pagination-sm'],

                'hideOnSinglePage' => true,

                'lastPageLabel' => '>>',

                'firstPageLabel' => '<<',

                'nextPageLabel' => '>',

                'prevPageLabel' => '<',

            ],

            'floatHeader' => true,

            'floatHeaderOptions' => ['top' => '70'],

            'perfectScrollbar' => true,

            'toolbar' => [

                ['content' =>

                    Html::a(Html::icon('glyphicon glyphicon-plus'), ['create'], ['role' => 'modal-remote', 'title' => Yii::t('app', 'Create new work'), 'class' => 'btn btn-default']) .

                    Html::a(Html::icon('glyphicon glyphicon-repeat'), [''], ['data-pjax' => 1, 'class' => 'btn btn-default', 'title' => Yii::t('app', 'Reset grid')]) .

                    '{toggleData}' .

                    '{export}'

                ],

            ],

            'striped' => true,

            'bordered' => true,

            'condensed' => true,

            'responsive' => true,

            'panel' => [

                'type' => 'primary',

                'heading' => Html::icon('glyphicon glyphicon-list') . ' ' . $this->title . Yii::t('app', ' listing'),

                //'before' => '<em>* Resize table columns just like a spreadsheet by dragging the column edges.</em>',

                'after' => BulkButtonWidget::widget([

                    'buttons' => Html::a(Html::icon('glyphicon glyphicon-trash') . Yii::t('app', ' Delete all'), ['bulk-delete'], [

                        'class' => 'btn btn-danger btn-xs',

                        'role' => 'modal-remote-bulk',

                        'data-confirm' => false, 'data-method' => false, // for overide yii data api

                        'data-request-method' => 'post',

                        'data-confirm-title' => Yii::t('app', 'Are you sure?'),

                        'data-confirm-message' => Yii::t('app', 'Are you sure want to delete these items?'),

                    ]),

                ]) .

                Html::tag('div', '', ['class' => 'clearfix']),

            ]

        ])

        ?>

    </div>

</div>

and the _column.php is as follow

return [

    [

        'class' => 'kartik\grid\CheckboxColumn',

        'width' => '20px',

        'vAlign' => 'middle',

    ],

    [

        'class' => 'kartik\grid\SerialColumn',

        'width' => '30px',

        'vAlign' => 'middle',

    ],

    [

        'class' => '\kartik\grid\DataColumn',

        'attribute' => 'code',

        'width' => '100px',

        'hAlign' => 'center',

        'vAlign' => 'middle',

    ],

    [

        'class' => '\kartik\grid\DataColumn',

        'attribute' => 'name',

        'width' => '200px',

        'vAlign' => 'middle',

    ],

    [

        'class' => '\kartik\grid\DataColumn',

        'attribute' => 'description',

        'vAlign' => 'middle',

    ],

    [

        'class' => '\kartik\grid\DataColumn',

        'attribute' => 'services',

        'format' => ['decimal', 0],

        'width' => '100px',

        'hAlign' => 'right',

        'vAlign' => 'middle',

    ],

    [

        'class' => '\kartik\grid\BooleanColumn',

        'attribute' => 'status',

        'format' => 'raw',

        'width' => '80px',

        'vAlign' => 'middle',

        'trueLabel' => Yii::t('app', 'Active'),

        'falseLabel' => Yii::t('app', 'Inactive'),

    ],

    [

        'class' => 'kartik\grid\ActionColumn',

        'dropdown' => false,

        'vAlign' => 'middle',

        'urlCreator' => function($action, $model, $key, $index) {

            return Url::to([$action, 'id' => $key]);

        },

        'viewOptions' => ['role' => 'modal-remote', 'title' => Yii::t('app', 'View'), 'data-toggle' => 'tooltip'],

        'updateOptions' => ['role' => 'modal-remote', 'title' => Yii::t('app', 'Update'), 'data-toggle' => 'tooltip'],

        'deleteOptions' => ['role' => 'modal-remote', 'title' => Yii::t('app', 'Delete'),

            'data-confirm' => false, 'data-method' => false, // for overide yii data api

            'data-request-method' => 'post',

            'data-toggle' => 'tooltip',

            'data-confirm-title' => Yii::t('app', 'Are you sure?'),

            'data-confirm-message' => Yii::t('app', 'Are you sure want to delete this item?')],

    ],

];

Can someone help?

TIA

Daniel

You’re using a third party grid that I’ve never used so I don’t know how to apply the styles or classes in that grid.

However, you just need to use the CSS property word-wrap with the value break-word and set a width on the cells that you need to word-wrap.

On the default grid you would just do something like the following in your column array.

[

 'class' => 'kartik\grid\SerialColumn',

'options'=>['style'=>'word-wrap:break-word;width:30px;']

]

You could also make it its own css class in your main css and add that class to the options.