When having multiple datgagrids on a page, it’s common you need to change the default top to bottom layout. The following code snippet shows how to use simple CSS to change layout to side by side.
Make sure to give enough width to datagrid container so that the grids won’t wrap.
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 33 34 35 36 37 | <div id="bigcontainer"> <div id="dg1"> <?php $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", 'orders'); $dg->enable_edit("FORM", "CRUD"); $dg->display(); ?> </div> <div id="dg2"> <?php $dg2 = new C_DataGrid("select * from employees", "employeeNumber", "employees"); $dg2->enable_edit("FORM", "CRUD"); $dg2->display(); ?> </div> <div id="dg3"> <?php $dg3 = new C_DataGrid("select * from offices", "officeCode", "offices"); $dg3->enable_edit("FORM", "CRUD"); $dg3->display(); ?> </div> </div> <style> div#bigcontainer{ width: 5000px; } div#dg1, div#dg2, div#dg2, div#dg3{ float:left; } </style> |