Nested Webgrid - Overflow/height issue RRS feed

  • 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 {
    #parentGrid.grid-scroll tbody {
      max-height: 35em;
      overflow-y: auto;
      overflow-x: hidden;
    #subGrid {
    /* 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?

    Monday, December 18, 2017 4:47 AM


  • User-1796506859 posted

    Found the issue 5 minutes after posting.

    I needed to change
    #parentGrid.grid-scroll tbody
    #parentGrid tbody
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 18, 2017 5:06 AM