Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation.

I am looking for a solution where the table occupies the entire available page height while maintaining a fixed header.

The issue arises when dealing with the "fixed-header" table on the right side, as its header doesn't remain fixed. Instead, it scrolls along with the page due to the presence of a scrollbar. The situation can be partially remedied by applying a maxHeight to the table (similar to the original "Fixed header" demo). However, using maxHeight prevents me from fitting the table to full page height...

For reference, you can view a demonstration of this problem on CodeSandbox.

cssreactjsmaterial-ui

Answer №1

In order to utilize the position: sticky property effectively, it is essential for the parent element to have a specified height.

In this scenario, you can set the height as follows: height: 100vh.

Refer to index.html for more details

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

Experience the live demonstration

<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>

Answer №2

Avoid specifying exact pixel values and opt for using viewport height instead

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

See a demonstration here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elevate your Material UI Avatar with an added level of

Attempting to give a MUI Avatar component some elevation or shadow according to the documentation provided here. <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" /> Enclosing the Avatar within a paper or Card element increases the size o ...

javascriptcssreactjstypescriptmaterial-ui

Instructions on adjusting the image size within a MUI Card

import { Card, CardActionArea, CardContent, CardMedia, Typography, } from "@mui/material"; import React from "react"; import { styled } from "@mui/material/styles"; const CardImage = styled("div")(({ theme ...

javascriptreactjsmaterial-uiresponsivecard

Top method for creating integration tests in React using Redux and Enzyme

Currently, I am working on setting up integration tests within my application. There are a few API calls that occur both when the component mounts and upon a button click. The response from these API calls is stored in the app's store, which then upd ...

javascriptreactjsreduxintegration-testingenzyme

Why does the same error keep popping up every time I attempt to install my React application?

I am new to React and feeling frustrated as I keep encountering the same error repeatedly. I have tried three different codes individually: npx create-react-app myapp npm init react-app myapp npm install -g create-react-app followed by create-react- ...

node.jsreactjsnpmcreate-react-appnpx

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

cssangularbootstrap-4z-indexopacity

What method does Apple use to apply overflow:hidden to elements within position:fixed?

After conducting my own experiments and delving into the topic online, I discovered that elements using position: fixed do not adhere to the overflow: hidden property of their parent element. This also applies to children within the fixed positioned elemen ...

htmlcssoverflowcss-position

Creating a sleek animation with JQuery for a dynamic-width div

Here is a snippet from my latest project. Take a look at the demonstrationFIDDLE. In this project, I have created a list with buttons: <a href="#f1" class="bt">1 <div class="show">Computers Networking</div> </a> When you ...

javascriptjqueryhtmlcss

Is the sequence of CSS styles important in styling web content?

I'm a newcomer to this field and recently encountered an issue with my div styling. My code was compatible with Chrome 11 but did not render properly in Firefox 4, Opera 11.1, and IE 8. Upon review, I found that the style for the div was as follows, a ...

csslayouthtml

Material UI autocomplete with multiple lines of options

I'm attempting to create an autocomplete feature that displays the firstName and lastName of a user on the first line and their id on the second. Here is my current implementation: <Autocomplete freeSolo disableClearable op ...

reactjsautocompletematerial-uimaterial-design

Exploring the Possibilities of Personalizing Data Tables

I have a unique requirement that I need help with: 1. On the mobile site, only 5 records should load by default with paginated data for subsequent pages. and 2. In desktop view, the default should be 10 records loaded with paginated data for subsequent ...

jqueryhtmlcssjquery-uidatatables

What steps can I take to make sure a jQuery Mobile table does not become responsive?

My goal is to make a table responsive by using media queries to hide optional columns on smaller devices. I need to hide two columns based on different screen sizes: @media screen and (max-width: 33em) { th.optional-1, td.optional-1 { display: no ...

cssjquery-mobilemedia-queries

Is there a way to change the color of a Material-UI snackbar without creating a new one for each color?

Is there a way to change the color of a snackbar in material-ui without creating a new one for each color? It seems that the example sandbox only has one color, while the others are static. ...

reactjsmaterial-ui

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

javascriptjqueryhtmlcsssidebar

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap

Is there a way to smoothly transition to the starting index of a LazyColumn when utilizing SnapFlingBehavior in Jetpack Compose?

Hey there, I've got a fascinating question to discuss about snapping in Compose development. With the introduction of snapping as a 1st class API for LazyColumn, replacing the Snapper library, a new query has emerged. How can one initialize the LazyCo ...

androidkotlinmaterial-uiandroid-jetpack-compose

Using NextJS's API routes to implement Spotify's authorization flow results in a CORS error

I am currently in the process of setting up the login flow within NextJS by referring to the guidelines provided in the Spotify SDK API Tutorial. This involves utilizing NextJS's api routes. To handle this, I've created two handlers: api/login.t ...

node.jsreactjstypescriptredirectnext.js

What scenarios call for implementing loadable components within a NextJS application?

I'm determined to boost my website's performance, and the Google Chrome Lighthouse tool is advising me to utilize loadable-components for server-side rendering to "eliminate unused JavaScript". After reading through the documentation, it appears ...

reactjsperformancenext.jsloadable-component

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

cssreactjsnext.js

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Why isn't Sequence.js Slider automatically playing?

Issue: The sequence.js slider I implemented is not animating. Despite adding the following options: animateCanvas: true, fadeStepWhenSkipped: false, autoPlay: true, autoPlayInterval, 2000 It still does not work. Is there something essential t ...

javascriptjquerycsshtmlslider