Search code examples
htmlcssfrontendag-gridstyling

ag-grid custom details don't scroll horizontally


I noticed in my webpage that if I scroll the ag-Grid part of the screen horizontally, then the column header and rows move, but not the expanded details section which seems frozen/pinned in place. See images below, with attention to the bar at the bottom.The ag-Grid section scrolls vertically and moves with the master row like how you'd expect.

GIF of scrolling demonstration

What you see upon loading and without scrolling

After scrolling a bit to the right

What changes should I make, and where can I find the files that affect this? Is there a way to make the custom details cell pinned to the beginning (left) of the ag-Grid box?

I've tried changing the row width to span the whole thing, changing the div's position to align "none none", but it seemed to have no effect.


Solution

  •   detailScrolling() {
        const gridContainer = document.querySelector('.ag-body-horizontal-scroll-viewport') as HTMLDivElement | null;
        const detailContainer = document.querySelector('.ag-full-width-container') as HTMLDivElement | null;
    
        detailContainer.style.width = '3000px'
        gridContainer.addEventListener('scroll', () => {
          const scrollLeft = gridContainer.scrollLeft; 
          detailContainer.style.transform = "translateX(-" + scrollLeft + "px)";
        })
      }  ```