I'm trying to get maximized grids to work as I need in my UI, but I'm having issues with the way pqGrid sizes, sets its z-index, and clips the body.
When the grid maximizes I'd like to:
1. Allow other dialog/elements to be displayed by: Not setting body css to height:0; width:0; overflow:hidden; and not setting the grids z-index to 1000 (keep it auto).
2. Leave an amount of the body/page visible at the top (allows app menu to function).
The following CSS, almost gets things working the way I'd like, but a maximized grid clips the bottom 36px of its contents:
.pq-grid[style*='position:fixed'], .pq-grid[style*='position: fixed']{
z-index:auto !important;
margin-top: 36px !important;
}
body {
width: auto !important;
height: auto !important;
overflow: auto !important;
}
Any ideas?
Edit: I should add, I've tried top: 36px instead of margin-top: 36px, with the same result: 36px clipping of grid content.