Automatic packaging at Kartik Gridview Datacolumn

Question

I have a gridview kartik widget on my Yii2 template page, and it displays data retrieved from the database, however, if the data is too long, it shows horizontal scrolling at the bottom of the widget, but I want it to automatically wrap the contents of the column only for order 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 copy the conf_value column, for example, how to do this? here I put a screenshot of what the widget looks like

Note: noWrap does not work because data has no spaces!

Answer 1

Thanks to gamitg for giving me the light, so I 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 cannot give a percentage of the maximum width, such as max-width: 50%; is there any opinion?

Answer 2

You need to use max-width in css.

How,

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

Note. Checked on code snippet.