Galilo Galilo
Galilo Galilo

Reputation: 569

unable to fix grid view row height in yii2

I need to fix row height in a grid view, where some table rows may include big text. I have tried a lot of what I have searched. Sometimes my footer overlaps my table, this is also a factor to be taken into consideration (when I tried to fix the table height. Thanks in advance, and this is my code:

     <?php

use app\models\SearchAppEvent;
use yii\data\ActiveDataProvider;
use yii\grid\GridView;
use yii\helpers\Html;
use yii\web\View;

    /* @var $this yii\web\View */
    /* @var $searchModel app\models\SearchAppEvent */
    /* @var $dataProvider yii\data\ActiveDataProvider */

    $this->title = Yii::t('event', 'App Event');
    $this->params['breadcrumbs'][] = $this->title;
    ?>
    <style>
        /*    tr {
                height: 100px;
                text-overflow: ellipsis;
            }
            td {
                height: 50px;
                text-overflow: ellipsis;        
            }
                .myclass{
                    height: 50px;
                    text-overflow: ellipsis;
                }
            .mydiv tr {
                height: 50px;
                text-overflow: ellipsis;                
            }
            .mydiv td {
                height: 50px;
                text-overflow: ellipsis;                
            }*/
    </style>
    <div class="app-event-index">

        <h1><?= Html::encode($this->title) ?></h1>
        <?php // echo $this->render('_search', ['model' => $searchModel]);   ?>

        <p>
            <?= Html::a(Yii::t('event', 'Create App Event'), ['create'], ['class' => 'btn btn-success']) ?>
        </p>
        <div style="height: 80%" class="mydiv">
            <?=
            GridView::widget([
                'dataProvider' => $dataProvider,
                'filterModel' => $searchModel,
    //        'options' => ['style' => ['text-overflow' => 'ellipses']],
    //        'options' => ['style' => 'max-height:30px;',
    //            'max-width:20px;',
    //        ],
                'rowOptions' => ['style' => 'height:70px;',
    //                'width:20px;',
                    'text-overflow:ellipsis;'
                ],
    //        'tableOptions' => ['class' => 'table table-bordered myclass'],
                'columns' => [

                    'title',
                    [
                        'attribute' => 'c_startDate',
                        'value' => function($model, $key, $index, $widget) {
                            return Yii::$app->formatter->asDatetime($model->c_startDate);
                        },
                    ],
                    [
                        'attribute' => 'c_endDate',
                        'value' => function($model, $key, $index, $widget) {
                            if ($model->c_endDate !== NULL) {
                                return Yii::$app->formatter->asDatetime($model->c_endDate);
                            } else
                                return "غير محدد";
                        },
                    ],
    //            'c_explanation:ntext',
                    [
                        'attribute' => 'c_explanation',
                        'format' => 'raw',
    //                'value' => function ($data) {
    //                    return $data->c_answer;
    //                },
                        'contentOptions' => [
                            'style' =>
                            ['text-overflow' => 'ellipses', 'height' => '100px'],
                        ]
                    ],
                    [
                        'attribute' => 'c_image',
                        'format' => 'html',
                        'value' => function ($data) {
                            return Html::img(Yii::getAlias('@web') . '/img/event/' . $data['c_image'], ['width' => '70px']);
                        },
                            ],
                            [
                                'attribute' => 'c_show',
                                'format' => 'html',
                                'value' => function ($data) {
                                    if ($data->c_show == 1) {
                                        return Html::img(Yii::getAlias('@web') . '/img/all/true.png', ['width' => '30px']);
                                    }
                                    return Html::img(Yii::getAlias('@web') . '/img/all/no.jpg', ['width' => '30px']);
                                },
                                    ],
                                    ['class' => 'yii\grid\ActionColumn'],
                                ],
                            ]);
                            ?>
        </div>
    </div>

Upvotes: 0

Views: 1375

Answers (1)

Galilo Galilo
Galilo Galilo

Reputation: 569

I have added a function that removes overflow from the text, and keeps the first 200 chars for example. It is not the optimal solution, but I have finished the website.

Upvotes: 0

Related Questions