877-GRID-666 24/7 online support 604, Tower A, New Trade Plaza, N.T., Hong Kong

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>

Live Demo (view it on mobile device or tablet)