Mobile Device Optimized

Mobile Responsive UI
Mobile Responsive UI

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"/>

Live Demo (view it on mobile device or tablet)