Nested Webgrid - Overflow/height issue

Question

User-1796506859 posted

Hi folks,

 I have an mvc5 page with a nested webgrid.   On the parent grid I have set the max-height: 35em property and also overflow-y: to hidden on the tbody element.  This causes the webgrid to scroll if the number of rows gets bigger than 35em;

#parentGrid {
  display:block;
}
#parentGrid.grid-scroll tbody {
  max-height: 35em;
  overflow-y: auto;
  overflow-x: hidden;
}

#subGrid {
  display:block;
}

/* ignored - even with !important */
#subGrid tbody {  
  max-height: 500em;
  overflow-y: hidden;
  overflow-x: hidden;
}

If I had a nested grid called SubGrid, it is inheriting the overflow and max-height properties, even if I set them to a different value (as above).   I then get two virtical scrollbars on every subgrid that is greater than 35em in height.

Does anyone know how I can disable virtical scrolling on the child grids but keep it on the parent?