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

What could be the reason for Sequelize to completely replace the record when updating in a put request?

I've been attempting to implement an "edit" feature within my project, but I've hit a roadblock in the process. Here's a snippet of the put request code: export const updateEvent = (event, id) => (dispatch, getState) => { request ...

javascriptnode.jsreactjsrequestsequelize.js

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...

javascripttypescriptgenerics

What is the method for adjusting the position of materialize CSS select options?

https://i.stack.imgur.com/b9p9T.png One issue arises when I open the Materialize CSS select, as the options end up covering the input. Ideally, I prefer the options to appear underneath the input. <div class="input-field "> ...

htmlcssselectmaterialize

Ensure the first column is fixed and all other columns have the same height

I have encountered an issue where the first column of my table has varying heights compared to the other columns, resulting in inconsistent row heights. Below is the code I am using: <div class="outer"> <div class="inner"> <table> ...

htmlcss

Encountering an error while configuring webpack with ReactJS: Unexpected token found while

I'm attempting to update the state of all elements within an array in ReactJS, as illustrated below. As a newbie to this application development, it's challenging for me to identify the mistake in my code. closeState(){ this.state.itemList.f ...

javascriptjsonreactjsforeachwebpack

Pasting a canvas over a div using CSS

My website features a <div> containing creatively styled rings with a design reminiscent of the android unlock pattern. The div showcases 9 dots that can be connected in various configurations. I'm looking to overlay a canvas on this setup to tr ...

jqueryhtmlcss

Unpacking objects within an array in the backend of a Next.js application

How can I resolve this issue? I am passing the req.query parameter with an array but I am unable to destructure or use items from the array. In my Next.js API backend, I only get [object Object] or undefined. How can I access and select specific values fro ...

javascriptnode.jsreactjsnext.js

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

javascripthtmlcss

Exploring the Implementation of Conditional Logic Using Variables in ReactJS

I have a current project in Reactjs where I am extracting the current url/hostname. My goal is to utilize this URL within an if-else statement - meaning, if the url="/" (home page) then display the first header, otherwise display the second hea ...

javascriptnode.jsreactjsnext.js

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

javascripthtmlreactjs

Updating documents within an array in MongoDB is a common task that can be easily accomplished

Trying to modify a specific property within my MongoDB document. This is how the document is structured: "_id" : ObjectId("57e2645e11c979157400046e"), "id" : 1651570992420, "creator" : "nameHere ...

node.jstypescriptmongodb

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow

How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...

htmlcss

Limit the ability to zoom in a webview application

I am facing an issue with my Android WebView app that is designed to load a specific URL and display it along with its links within the app. Despite setting the webpage size to 720px x 1280px using CSS to fit the screen of a Galaxy S3, I am encountering di ...

androidcssandroid-webview

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Is there a way to combine two kleisli arrows (functions) f: A -> Promise B and g: B -> Promise C into h: A -> Promise C using the library fp-ts? Having experience with Haskell, I would formulate it as: How can I achieve the equivalent of the > ...

typescriptfunctional-programmingfp-ts

Identifying Internet Explorer version through CSS functionality and feature detection

As of IE10, browser detection tags are no longer supported for identifying a browser. In order to detect IE10, I am utilizing JavaScript and a technique that tests for certain ms prefixed styles like msTouchAction and msWrapFlow. I would like to do the s ...

cssinternet-explorerinternet-explorer-11feature-detection

Storing data from a service into an array in Angular: Best practices

I have a service that provides getter and setter methods, returning id: number and title: String values from my dialog component. I am trying to save these responses into my data array but struggling to achieve it. For instance: 0: {id: 0, title: &qu ...

arraysangulartypescriptserviceresponse

Updating a component's property in React from a different component

I am completely new to using React, so please be patient with me. Currently, I am working on a webpage that incorporates React components. However, the entire page cannot be built using React; it's not an option for me. What I am trying to achieve i ...

jsonreactjs

Anticipate a nested attribute within a templated function parameter that is determined by the type of the template

My goal is to ensure that the "options" property of the parameter object includes the "label" property. I attempted to achieve this, but encountered compilation errors in my code. interface BaseOptionType { label: string; } interface CreatableAutoComp ...

typescripttypescript-generics

How to change the focus on a Material UI input field

I am facing an issue with resetting/clearing an input field using a button click: Take a look at the code here for reference. const searchInput = useRef(null); const clearInput = () => { searchInput.current.value = ''; searchInput ...

javascriptmaterial-ui