phpgridviewyii2yii2-basic-app

Yii2 grid view not responsive

i have grid view and add clas table responsive like this

<div class="card-box table-responsive">
        <?= GridView::widget([
            'dataProvider' => $dataProvider,
            'options' => ['class' => 'table-responsive'],
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],

                'id',
                'username',
                'kode_role',
                'kode_karyawan',
                'auth_key',
                'password_hash',
                'password_reset_token',
                'email:email',
                [
                    'header' => 'status',
                    'format' => 'raw',
                    'value' => function($dataProvider){
                        if($dataProvider->status == '5') {
                            return'<span class="btn btn-xs btn-warning">Tidak Aktif</span>';
                        }elseif ($dataProvider->status == '10') {
                            return '<span class="btn btn-xs btn-success">Aktif</span>';
                        }
                    }
                ],
                'created_at',
                'updated_at',
                'verification_token',
            ],
        ]); ?>


    </div>

please don't mind about what i show on grid view, i just show many of them for test responsive on mobile, but the result still not responsive on mobile like this picture link what's wrong with my code? sorry for my bad English.

enter image description here

  1. Update i delete the hash and the other that have many character and stil like this update enter image description here
Solution

  • i've found answer on https://stackoverflow.com/a/32013813/16340676

    "The reason for the bug is that bootstrap gives table-responsive styles of width: 100% and overflow-y: hidden. These two styles do not play nice together. Overflow hiding works best when there is a fixed or max-width. I gave table-responsive a max-width: 270px; for mobile devices, and that fixed the bug."

    the solution just add a max-width in my table-responsive css