Change Master Detail Grids Layout Using CSS

master detail layout css

The default master detail grid has the top down layout. The master, the parent datagrid is always on top of the child grid. This is the default layout. Each datagrid is enclosed by a div with a unique ID.

In the example below, the master grid would have the ID gbox_orders, and the 1st detail grid would have the ID gbox_orders_d1 (Replace “orders” here with your own master table name) Once you have those IDs, one can use CSS to set layout easily. Read more about CSS layout on w3school.

The below CSS set the parent grid float on the left while the child grid is fixed at the right bottom corner.

1
2
3
4
5
6
7
8
9
10
11
12
/*; master grid id format: #gbox_<MASTER TABLE NAME> */
#gbox_orders{
    float:left;
    margin:30px 10px;
}
/* detail grid id format: #gbox_<MASTER TABLE NAME>_d<index> */
#gbox_orders_d1{
    margin:10px;
    position: fixed;
    bottom: 0;
    right: 0;
}

Live Demo!