在Kartik Gridview Datacolumn中自动换行

我的Yii2模板页面中有一个kartik的gridview小部件，它列出了从数据库中获取的数据，但是如果数据太长，它会在小部件底部显示水平滚动，但是我希望它自动包装列的内容以适应页面。这里是我的代码在Kartik Gridview Datacolumn中自动换行

<?= 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'], 
    ], 
]); ?>

我想打包conf_value列例如如何做到这一点？这里我把截图如何部件看起来

注意：noWrap不工作，因为数据没有空白！

来源

2015-10-13 tolgayilmaz

看到这个链接，它可能会帮助你，http://jsfiddle.net/Daniel_Hug/Sp5g6/和http://jsfiddle.net/gryzzly/cbppl/ –

什么exacyly你想要做的，打破一定字符或，悬停时显示数据？ –

不会中断某些字符，只要将它放在列中就可以使用它的表格的50％。 – tolgayilmaz

感谢gamitg给了我一个这么轻我已经改变了我的代码

<?= 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'], 
    ], 
]); ?>

，但我不能给百分比最大宽度一样最大宽度：50％;有什么意见吗？

来源

2015-10-13 13:31:58 tolgayilmaz

'max-width'是宽度的最大值，意思是内容区域的限制，所以你可以给'pixel'或'emn' – GAMITG

您需要在css中使用max-width。

等作为，

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

注：在测试了您的代码段。

来源

2015-10-13 12:59:10 GAMITG

在哪里写这个css我找不到正确的td类bootstrap.css（至少尝试过没有成功） – tolgayilmaz

我已经使用这个CSS作为内部的CSS。但你可以像'.kv-grid-table> tbody> tr> td'一样使用类。 – GAMITG

在Kartik Gridview Datacolumn中自动换行

回答

相关问题