phpGrid has decent mobile device support. View the below demo on your mobile device such as iOS and Android phone. It’s recommended to set both autowidth and autoheight to true.
1 | $dg -> enable_autowidth(true) -> enable_autoheight(true); |
Required CSS – Replace “orders” with your own table name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <style> /* optional. removes page margin */ body{margin:0px;} /* optional. widen textbox width */ .ui-jqgrid-bdiv input{width:100%;} /* row height */ #gbox_orders table tr > th{ padding-top:10px; padding-bottom:20px; } .ui-jqgrid .ui-jqgrid-htable th div{ height: 80px; } /* caption font size */ /* content font size */ #gbox_orders table, #gbox_orders table tr > th > div, #gview_orders > div.ui-jqgrid-titlebar > span{ font-size: 40pt; } #gview_orders > div.ui-jqgrid-titlebar{ padding: 20px; } #gview_orders input, #gview_orders textarea{ font-size: 40pt; } </style> |
Lastly, insert meta viewport in head so that the page is rendered in a mobile view on mobile devices such as iPhone and Android phones.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/> |