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.
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.
What you have tried so far? Add gridview code
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>Replace with
<div class="table-responsive">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