Harry asked 8 years ago
Hi
I have a master detail grid which I wish to be able to resize in height according to the browser window height so that the master grid is 66% of the height of the window and the detail view is 33%.
Ive used
$opt["height"] = "400";
$grid->set_options($opt);
which works but
$opt["height"] = "50%";
$grid->set_options($opt);
seems to be ignored and displays as if it were
$opt["height"] = "100%";
$grid->set_options($opt);
Is this a limitation of a master/detail arrangement or is there another way to have the 2 grids resizing in height dynamically?
Abu Ghufran answered 8 years ago
You can have custom JS code to set height of grid.
http://pastebin.com/4uD54XtH
Set your grid ids and height offset wrt window height.
Harry answered 8 years ago
Thank you but could you please be bit more specific, I've tried:
jQuery(document).ready(function(){
jQuery(window).bind("resize", function () {
var height_master = "66%";
var height_detail = "33%";
// adjust height on resize
jQuery("#list1").jqGrid('setGridHeight',jQuery(window).innerHeight(height_master)-120);
jQuery("#list2").jqGrid('setGridHeight',jQuery(window).innerHeight(height_detail)-120);
}).trigger("resize");
});
Abu Ghufran answered 8 years ago
Hello,
jQuery(window).innerHeight() is the full height of window.
To set 66% of full height, you need to set something like:
jQuery("#list1").jqGrid('setGridHeight',jQuery(window).innerHeight()*.66 -120);
And same for 33%.
jQuery("#list2").jqGrid('setGridHeight',jQuery(window).innerHeight()*.33 -120);
-120 is adjustment offset. You can set is wrt your layout need.
