Yii Framework Forum: Mobile Layout for GridView - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Mobile Layout for GridView

#1 User is offline   carn4ge 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 04-January 17

Posted 07 December 2017 - 06:34 AM

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

#2 User is offline   alrazi 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,490
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 07 December 2017 - 06:46 AM

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


https://css-tricks.c...ve-data-tables/
0

#3 User is offline   carn4ge 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 04-January 17

Posted 07 December 2017 - 07:49 AM

View Postalrazi, on 07 December 2017 - 06:46 AM, said:

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


https://css-tricks.c...ve-data-tables/


I see, I will look into that thanks!

Btw, does using Mobile Detect helps?
0

#4 User is offline   alrazi 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,490
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 07 December 2017 - 09:58 AM

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.
0

#5 User is offline   carn4ge 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 04-January 17

Posted 07 December 2017 - 10:38 AM

View Postalrazi, on 07 December 2017 - 09:58 AM, said:

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.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users