Yii2 GridView không thể đặt chiều rộng cột

Question

đây là lần đầu tiên tôi đang sử dụng Widget Widget Yii2. Tôi đã cố gắng thiết lập chiều rộng của một cột sau khi đọc một số câu trả lời ở đây trên stackoverflow, nhưng nó sẽ không làm việc cho tôi và tôi sẽ thích nó nếu các cột có độ rộng khác nhau (đặc biệt là đầu tiên).

Tôi đã thử đặt chiều rộng bằng cách sử dụng 'contentOptions' trực tiếp cho cột đầu tiên và cũng có tệp CSS bên ngoài cho cột tên sản phẩm.

Ai đó có thể vui lòng cho tôi biết nếu có sự thay thế hoặc nếu có điều gì đó tôi đang làm sai?

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

Answer 1

Hãy thử với chỉ Options:

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

Answer 2

Nó phụ thuộc vào những gì bạn đang cố gắng để đạt được. Nhưng max-width với 20 pixel có lẽ không phải là những gì bạn thực sự muốn. Hãy thử nó với width:

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

Answer 3

Nếu bạn muốn thiết lập chiều rộng cho cột duy nhất bạn có thể sử dụng headerOptions:

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

Answer 4

Đây có thể là kết quả của tài sản white-space css, mà sẽ ảnh hưởng đến độ rộng ô trong bảng tùy về nội dung trong đó. Trong dự án Yii2 của tôi, tôi có:

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

Không ai từ những lời khuyên được cung cấp ở đây không hữu ích cho tôi. Nhưng điều này là hữu ích:

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

Answer 5

bạn phải thiết lập nó như thế này:

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

Với contentOptions bạn có thể thiết lập tùy chọn cho tất cả td cho cột "title". Trong Site.css là không gian trắng được thiết lập để nowrap theo mặc định.

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

Nhưng nếu nội dung của bạn dài hơn 200px chẳng hạn, col sẽ được mở rộng theo nội dung và bỏ qua.

Answer 6

Giải pháp duy nhất mà đã hoàn toàn giải quyết được vấn đề đã được một trong những đề xuất bởi https://stackoverflow.com/users/2053862/rostyslav-pylypenko: Đây là mẹo:

td { 
    white-space:normal !important; 
} 

Answer 7

Tôi giải pháp đơn giản nhưng chức năng là để tạo ra một CSS thiết lập một max-width cho cột. Cờ !important là để đảm bảo rằng thuộc tính này không bị quá tải.

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

Sau đó, bạn chỉ cần đăng ký nó trong chế độ xem của bạn.

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

Chúng tôi có và ví dụ về bảng này làm việc trong hình ảnh này here.

Answer 8

add Đầu tiên lựa chọn như

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

sau đó thêm bên dưới dòng

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