在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中自動換行

回答

相關問題