Yii2 GridView無法設置列寬

這是我第一次使用Yii2 GridView Widget。我試過在閱讀stackoverflow的一些答案後嘗試設置列的寬度，但它不適用於我，如果列寬度不同（特別是第一個），我會喜歡它。Yii2 GridView無法設置列寬

我已經嘗試使用'contentOptions'直接爲第一列和產品名稱列的外部CSS文件設置寬度。

有人可以告訴我，如果有替代方案或如果有什麼我做錯了嗎？

<?= GridView::widget([ 
    'dataProvider' => $dataProvider, 
    'filterModel' => $searchModel, 
    'columns' => [ 
     [ 
      'class' => 'yii\grid\SerialColumn', 
      'contentOptions' => ['style' => 'max-width:20px;'], 
     ], 

     [ 
      'format' => 'raw', 
      'label' => 'Image', 
      'value' => function ($data) { 
       $url = $data->imgSrc; 
       return Html::img($url, ['width' => '40px']); 
      }, 
     ], 

     [ 
      'attribute' => 'name', 
      'format' => 'raw', 
      'label' => 'Product name', 
      'contentOptions' => function ($model, $key, $index, $column) { 
       return ['class' => 'tbl_name']; 
      }, 
     ], 
    ], 
]); ?>

來源

2015-06-22 user2997695

嘗試只用Options：

[ 
     'class' => 'yii\grid\SerialColumn', 
     'options' => ['style' => 'max-width:20px;'], 
],

來源

2015-06-22 09:14:45 Chinmay

謝謝你的快速答覆，但不幸的是，這不會爲我工作（我忘了說我做嘗試之前，只是再試一次，我得到了同樣的結果），我真的不明白問題可能是什麼。 – user2997695

它爲我工作。你檢查過螢火蟲嗎？該物業是否適用？ – Chinmay

我想它確實如此，我只查看了頁面源代碼，而且好像在相應的td標籤中添加了樣式。我還注意到，當刪除網格的標題部分時，它確實起作用，但這不是我所需要的，因爲您可以使用收聽器進行排序。最後，在檢查表格的CSS時，我注意到了layout-table：fixed，並且我爲該表格添加了一個新類並設置了layout-table：inherit。我知道這是一種解決方法，但它似乎以我需要的方式工作。仍然不知道爲什麼其他解決方案不起作用。不過謝謝您的幫助！ – user2997695

這取決於你想要達到的目的。但max-width與20像素可能不是你真正想要的。與width嘗試：

[ 
    'class' => 'yii\grid\SerialColumn', 
    'contentOptions' => ['style' => 'width:100px;'], // not max-width 
],

來源

2015-06-22 12:16:49 robsch

不幸的是，這也行不通。 – user2997695

好的。那麼請告訴我們你想要達到的目標以及你目前得到或看到的內容。你有哪些寬度？你有一個公共URL嗎？ – robsch

我最終通過使用一種解決方法來管理我想做的事情：在檢查表格的CSS時，我注意到了layout-table：fixed，並且我爲表格添加了一個新類並設置了layout-table：inherit。我之前看到的所有列都有相同的寬度，所以如果我說2列，每列寬度爲50％，3列 - 33％，並繼續。 – user2997695

如果您想爲單個列設置寬度可以使用headerOptions：

[ 
    'attribute' => 'attribute_name', 
    'headerOptions' => ['style' => 'width:20%'], 
],

來源

2016-08-04 09:47:36 sambua

這可能是white-space CSS屬性的結果，這將取決於影響表單元格的寬度關於它的內容。在我Yii2項目，我必須：

.grid-view td { 
    white-space: nowrap; 
}

從這裏提供的建議沒有一個不是有用的我。但是，這是有用的：

.grid-view td { 
    white-space:pre-line; // or just 'normal' 
}

來源

2016-11-25 19:23:47

哦，夥計，你是冠軍！唯一完全解決問題的解決方案。 – Rev

你必須將其設置是這樣的：

<?= GridView::widget([ 
     'dataProvider' => $dataProvider, 
     'filterModel' => $searchModel, 
     'columns' => [ 
      [ 
       'attribute'=>'title', 
       'contentOptions' => ['style' => 'width:200px; white-space: normal;'], 
      ], 
     ] 
    ] 
); 
?>

隨着contentOptions您可以設置選項對所有TD爲列「稱號」。在Site.css中，默認情況下是將空白設置爲nowrap。

.grid-view td { 
    white-space: nowrap; 
}

但是，如果你的內容是不是200像素例如更長的時間，山坳將內容擴大，並忽略你。

來源

2017-02-23 15:03:46 freesh

已經完全解決了這個問題是在一個由https://stackoverflow.com/users/2053862/rostyslav-pylypenko提出的唯一的解決辦法：這是使用方法：

td { 
    white-space:normal !important; 
}

來源

2017-04-19 02:23:47 Rev

我簡單而實用的解決方案是創建一個CSS設置一個最大寬度爲列。 !important標誌是爲了確保該屬性不會被覆蓋。

td { 
    max-width: 800px; 
    white-space: normal !important; 
}

然後，您只需在您的視圖中註冊它。

$this->registerCssFile('css/tableColumnMaxWidht.css');

我們有這個表格的例子使用圖片here。

來源

2017-07-07 13:45:59

首先添加選項像

GridView::widget([ 
    'dataProvider' => $dataProvider, 
    'filterModel' => $searchModel, 
    'options' => [ 'style' => 'table-layout:fixed;' ],

後

下面添加行

[ 
    'attribute' => 'news_description', 
    'contentOptions' => [ 'style' => 'width: 25%;' ], 
],

來源

2017-12-09 19:34:16 Saeed

Yii2 GridView無法設置列寬

回答

相關問題