Mobile Layout for GridView

carn4ge · December 7, 2017, 11:34am

Is there a better way to fix the layout of the GridView when browsing in mobile phones?

alirz23 · December 7, 2017, 11:46am

gridview renders a html table, you should look into how to make your tables responsive.

carn4ge · December 7, 2017, 12:49pm

I see, I will look into that thanks!

Btw, does using Mobile Detect helps?

alirz23 · December 7, 2017, 2:58pm

you could use mobile/device detect to add a class to your gridview and style with css.


// your template file

GridView::widget([

    'options' => ['class' => '' . (is_mobile() ? ' grid-view-mobile' : '')]

    // ...

]);




// your css file might contain style for that class 

.grid-view-mobile {

}

note: is_mobile() is an dummy function it does not exist you have to write that logic to detect device.

carn4ge · December 7, 2017, 3:38pm

alrazi:

you could use mobile/device detect to add a class to your gridview and style with css.
// your template file

GridView::widget([

    'options' => ['class' => '' . (is_mobile() ? ' grid-view-mobile' : '')]

    // ...

]);




// your css file might contain style for that class 

.grid-view-mobile {

}
note: is_mobile() is an dummy function it does not exist you have to write that logic to detect device.

Thanks for the tip, I have already found a solution. I realised I have installed the Kartik GridView widget and it has a responsive function so that’s what I have used.