Fluent UI Reading the height of DetailsList's ViewPort

Question

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.

Answer 1

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

const gridContainerStyle: IStackStyles = {
   root: { height: "70vh", position: "relative" },
 };