Gridview Responsive help


(luismanoel12) #1

I would like to know how to make gridview responsive, I tried many ways, many bootstrap classes and pure css, but nothing works and I need to make responsive for screens less than 600px.


(Insane Skull) #2

What you have tried so far? Add gridview code


(luismanoel12) #3

This is one of many others gridview thath I have, I tried to use bootstrap classes but doesn’t work, then I tried to style by my self using css but again doesn’t work. I need let the gridview responsive for mobile and this is the hard part, do you have some idea to style the gridview for beeing responsive?

<div class="mobile-gridview">            
                    <?= GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'columns' => [
                            [
                                'attribute' => 'titulo',
                                'value' => 'questionario.titulo'
                            ],
                            [
                                'attribute' => 'tipo',
                                'value' => function (PsEtapa $model) {
                                    return PsEtapa::listTipoRascunho()[$model->tipo];
                                },
                                'filter' => PsEtapa::listTipoRascunho()
                            ],
                            [
                                'class' => ActionColumn::class,
                                'width' => '100px',
                                //                    'width' => '100px',
                                'visibleButtons' => [
                                    'view' => false,
                                    'delete' => true
                                ],
                                'buttons' => [
                                    'update' => function ($url, PsEtapa $model) {
                                        return Html::a('<i class="glyphicon glyphicon-pencil"></i>', [PsEtapa::tipoController($model->tipo) . "/update-rascunho", 'id' => $model->id], [
                                            'class' => 'btn btn-primary btn-sm',
                                        ]);
                                    },
                                    'delete' => function ($url, PsEtapa $model) {
                                        return Html::a('<i class="glyphicon glyphicon-remove"></i>', ['ps-etapa/delete', 'id' => $model->id], [
                                            'class' => 'btn btn-danger btn-sm',
                                            'data' => [
                                                'confirm' => 'Tem certeza que deseja excluir esse Teste?',
                                                'method' => 'post',
                                            ]
                                        ]);
                                    },
                                ],
                            ]
                        ],
                    ]); ?>
            </div>

(Insane Skull) #4

Replace with

<div class="table-responsive">

(luismanoel12) #5

This class mobile-gridview has been created by me, is just for align the items for the left, I already try this class but doesn’t work, I tried again and doesn’t worked. Also I am using bootstrap 3