Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the full width of the page.

Layout.tsx:

<AppBar position="static" component="header">
  <Toolbar>
    <Logo className={classes.logo} />
    <div className={classes.grow} />
    <IconButton className={classes.avatar} edge="end">
      <Avatar />
    </IconButton>
  </Toolbar>
</AppBar>
<Container className={classes.content} component="main">
  {props.children}
</Container>

I have experimented with different combinations of the available position values for the AppBar, including "static", "fixed", "absolute", "sticky", "relative", or leaving it undefined. Additionally, I have tried adjusting the heights and widths of the content, but so far, no combination has produced the desired outcome.

cssreactjstypescriptmaterial-ui

Answer №2

To set the maximum height of the app bar to 20vh and the content to 80vh, you can use the following syntax:

<AppBar position="static" component="header" sx={{maxHeight:20vh}}>
  <Toolbar>
    <Logo className={classes.logo} />
    <div className={classes.grow} />
    <IconButton className={classes.avatar} edge="end">
      <Avatar />
    </IconButton>
  </Toolbar>
</AppBar>
<Container className={classes.content} component="main" sx={{maxHeight:80vh}}>
  {props.children}
</Container>

Answer №3

According to MUI's advice, you can find more information at the following link: https://mui.com/material-ui/react-app-bar/#fixed-placement

The key is to incorporate a fake Toolbar within your container, similar to this example:

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

export function Home() {
  return (
    <Box sx={{ height: "98vh" }}>
      <AppBar component="nav">
        <Toolbar>
          <Typography
            variant="h6"
            component="div"
            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
          >MUI</Typography>
        </Toolbar>
      </AppBar>
      <Toolbar/>
      <Box component="main" sx={{ height: 'calc(100% - 56px)', backgroundColor:'red' }}>      
         <Typography sx={{ height: '100%' }}>Something in the Way</Typography>
      </Box>
    </Box>
  );
}

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

Error: Unable to iterate through users due to a non-function error while attempting to retrieve the firestore document

I encountered an issue with my code, receiving the error message: TypeError: users.map is not a function. Can anyone help me identify what might be wrong? const [users, setUsers] = useState([]); const getData = async () => { try { const use ...

javascriptreactjsfirebasegoogle-cloud-firestore

Tips for aligning pagination in the MUI v5 table component and creating a fixed column

I am currently experimenting with MUI table components and have created an example below with pagination. const MuiTable = () => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); const [data, setData] ...

javascriptreactjsmaterial-uipagination

Go through a collection of Observables and store the outcome of each Observable in an array

As a newcomer to Angular and RxJS, I am facing a challenge with handling social posts. For each post, I need to make a server call to retrieve the users who reacted to that post. The diagram linked below illustrates the process (the grey arrows represent r ...

angulartypescript

How can I add a new key value pair to an existing object in Angular?

I'm looking to add a new key value pair to an existing object without declaring it inside the initial object declaration. I attempted the code below, but encountered the following error: Property 'specialty' does not exist on type saveFor ...

angulartypescriptobject

Incorporate distinct items into an array using reactjs

I'm facing an issue where clicking on a certain element multiple times adds it to my array multiple times. I need help in figuring out how to add only unique elements to the array. Can anyone offer some guidance? Thank you in advance. const handleCli ...

javascriptreactjsnext.js

When attempting to organize the dates, an error is thrown stating: Cannot sort data.createdAt as it is

Encountering an exception when sorting dates: TypeError: data.createdAt.sort is not a function. Seeking a solution to sort and display the most recent record first in my react app. { displayWinner.map(data => ( ...

reactjsreact-hooks

Is there a way to insert a component or div, such as a chart, into a Table Cell using React MUI?

While working with React and integrating MUI, I am interested in embedding a component (such as a chart) within a Table Cell. Is this achievable? ...

reactjsmaterial-ui

Having trouble downloading a PDF file on a local server with React and the anchor tag element

Having trouble downloading a pdf file from my react app to my Desktop. I've reached out for help with the details How to download pdf file with React. Received an answer, but still struggling to implement it. If anyone new could provide insight, that ...

javascriptpdfreactjsreact-router

Error: The function theme.spacing is not recognized as a valid function

I'm currently developing a React application using Material-UI version 5, and I've encountered an issue where theme.spacing is not functioning as expected. import { makeStyles } from "@material-ui/styles"; import React from "react& ...

reactjsmaterial-ui

Trigger the identical event to be sent to two distinct functions upon the corresponding button click in Angular 2 using Typescript

I recently implemented a service that fetches JSON data and subscribes to two different variables within my component. These variables are then used by two separate drop-down lists to filter the data accordingly. The filtered data is then sent to another s ...

angulartypescript

Using TypeScript to style React components with the latest version of Material UI, version

Styled typography component accepts all the default typography props. When I include <ExtraProps> between styled() and the style, it also allows for extra props. const StyledTypography = styled(Typography)<ExtraProps>({}) My query is: when I r ...

reactjstypescriptmaterial-uistyled-componentsreact-typescript

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

htmlcssflexbox

I'm exploring ways to incorporate a button that allows users to easily switch between different themes on my website using Material UI. Here's how I've progressed thus

Check out my latest code on CodeSandbox at this link: https://codesandbox.io/s/gifted-mcnulty-6ejcx I've been working on implementing a boolean that changes the theme of the website when a button is clicked. I'm looking for some guidance on how ...

reactjsmaterial-uithemes

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss

Ways to grow a React Component using flexbox to fill the entire page

Currently, I am facing a challenge in creating a sidebar. The issue lies in the container for the element "shrinking to its content." I have explored different solutions such as flex-grow, setting App.css html,body height to 100%, and more, but none of th ...

htmlreactjsflexboxcontainers

Tips for resolving the error "Module not found: Unable to locate '@babel/runtime/core-js/map' in Material-UI"

While working with React using Material UI, I recently updated Material-UI to the latest version and encountered the following error: ../node_modules/material-ui/styles/withStyles.js Module not found: Can't resolve '@babel/runtime/core-js/map&a ...

javascriptreactjsmaterial-uibabeljs

Ways to personalize the MUI paper CSS for select drop down menus

In my React project, I am using Material UI for the select dropdown. When clicking on the first set of options, a Material UI paper pops up with the options overlapping the select element. I want to customize the theme so that the popup appears slightly ...

reactjsmaterial-ui

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

htmlcssimage

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays

The error message "React Native Redux useSelector is returning Undefined after navigation" has

After navigating to a new state, I am facing issues with accessing the updated state. Initially, I initialize my dataState in the reducer and update it using actions. On Screen 1, I successfully use this state after dispatching, but when moving to another ...

javascriptreactjsreact-nativereduxreact-hooks