2

I'm using DetalisList within ScrollablePane component to keep the header in view, and let the rows scrollable. However, this requires me to manually set the height of the scrollable container.

div.scrollable-container
    ScrollablePane
        DetailsList

When I investigate the DOM elements for DetalisList, I can see that it's wrapped inside a ViewPort element. The height of this element is the actual height of the sum of the height of all components that make up the list (column headers, rows. etc.). Thus, I want to be able to read this value and set the container height based on whether it exceeds a certain value or not.

Is there a nice to way to access the height of the ViewPort? I can always query the DOM, and find the element, but I'd like to avoid relying on the internal structure of the component.

So, far I could not find any information on this. I noticed DetailsList takes a prop called viewport, but I don't think this is what I want.

CookieEater
  • 2,237
  • 3
  • 29
  • 54

1 Answers1

1

You can try by giving height in "vh" (viewport height) unit. For example,

const gridContainerStyle: IStackStyles = {
   root: { height: "70vh", position: "relative" },
 };
Vaibhav Ghorpade
  • 73
  • 9