Auto wrap in Kartik Gridview Datacolumn

Question

I have a kartik's gridview widget in my Yii2 template page and it lists the data fetched from the database, however if the data is too long it shows a horizontal scroll at the bottom of the widget but I want it to auto wrap content of the column just to fit in the page. Here is my code

    <?= GridView::widget([
    'responsiveWrap' => false,
    'hover' => true,

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'kartik\grid\SerialColumn'],
        'conf_key',
        ['attribute' => 'conf_value',
            'class' => 'kartik\grid\DataColumn',
            'noWrap' => false
        ],

        'class_name',
        ['class' => 'kartik\grid\ActionColumn'],
    ],
]); ?>

I want to wrap conf_value column for example how to do it? here i put the screenshot how widget looks

Note: noWrap doesn't work because the data have no whitespace!

Answer 1

Thanks gamitg for giving me a light so i have changed my code as

    <?= GridView::widget([
    'responsiveWrap' => false,
    'hover' => true,

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'kartik\grid\SerialColumn'],
        'conf_key',
        ['attribute' => 'conf_value',
            'class' => 'kartik\grid\DataColumn',
            'noWrap' => false,
            //the line below has solved the issue
            'contentOptions' => 
            ['style'=>'max-width: 350px; overflow: auto; word-wrap: break-word;']
            ,
        ],
        'class_name',
        ['class' => 'kartik\grid\ActionColumn'],
    ],
]); ?>

but I can't give percentage to max-width like max-width: 50%; is there any opinion?

Answer 2

You need to use max-width in css.

Like as,

td {
    max-width: 100px;
    overflow: auto; /* optional */
    word-wrap: break-word;
}

Note: Tested on your code snippet.