Layout two demos from material-ui documentation

3
votes

I'm trying to combine two demos from material-ui documentation.

I want the table to take all the available page height, but still have a fixed header.

The problem is that the "fixed-header" table on the right side, doesn't stick its header, there's a page scrollbar and the header scrolls up with the page. unless I'm adding a maxHeight to the table (Similar to the original "Fixed header" demo). BUT, with maxHeight I can't fit the table to the full page height...

Here's a CodeSandbox demonstrating the problem.

2
cssreactjsmaterial-ui

2 Answers

1
votes

To use this position: sticky property, the parent element must have a defined height.

In your case it is possible to define something as height: 100vh.

See index.html

https://codesandbox.io/s/material-demo-v44v6

Demo working

https://v44v6.csb.app/

<style>

       .makeStyles-tableWrapper-130{
          height: calc(100vh - 84px);
        }
        .makeStyles-content-5{
          padding: 24px 24px 0;
          flex-grow: 1;
          height: auto;
          box-sizing: border-box;
        }

</style>
0
votes

Don't use hard pixel value you can use viewport height

const useStyles = makeStyles({
  tableWrapper: {
    height: "100vh",
    overflow: "auto"
  }
});

Demo Here: https://0qy7e.csb.app/