Mobile Device Optimized

Fri, 27 Feb 2015 12:30:10 +0000

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

>
/* 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;
}
>

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)

The post Mobile Device Optimized appeared first on phpGrid - PHP Datagrid.

responsive Archives | phpGrid - PHP Datagrid

Mobile Device Optimized