CODEWITHSUNDEEP
cssreactjsmaterial-uireact-hooksstyled-components
Joseph
Joseph

Reputation: 7755

Scrollbar Appearing in React App When There is AppBar in Material UI

I have a very simple problem in my React app. How can i remove the scrollbar in my page? I think this is because of the height that i put which is 100vh. However, if i remove the AppBar, the scrollbar disappears. How would i fix this problem?

Pls check my codesandbox here Click here

<div>
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6">News</Typography>
    </Toolbar>
  </AppBar>
  <Grid container component="main" className={classes.root}>
    <CssBaseline />
    <Grid item xs={false} sm={4} md={7} className={classes.image} />
    <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
          <Box mt={5}>
            <Copyright />
          </Box>
        </form>
      </div>
    </Grid>
  </Grid>
</div>

Upvotes: 1

Views: 4947

Answers (3)

Karanveer Singh
Karanveer Singh

Reputation: 21

AppBar size (height) may not always be 64px, maybe in your case its fine.

In my case

<AppBar position="sticky">

fixed the issue.

If this doesn't work in your case, there might be some other styling affecting the result.

For context, I also have the below styles

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, #root {
    height: 100%;
    width: 100%;
}

Where #root is the main (root) div with id root where React renders all the components

ReactDOM.createRoot(document.getElementById('root'));

Upvotes: 0

Rajiv
Rajiv

Reputation: 3772

there are two ways to do this.
First is to simply add the position="fixed" prop in material-ui Appbar. It'll make the header fixed and the rest other elements will adjust accordingly. But to keep the UI the same add padding equals the Appbar height (around 64px).

The second method is to just add the paddingTop to Grid container equals to the Appbar height keeping the position="static" prop same. or also another way is to minus the appbar height from total height i.e; "calc(100vh - 64px)"



The important point is here to decrease the appbar height from the Grid container for static appBar

Upvotes: 0

Shuvo
Shuvo

Reputation: 1293

You have set height: 100vh for your main section. And the AppBar section is out of the main section. If you want to remove scrollbar, you need to remove the height of the AppBar, which is 64px, when you set height for the main section:

height: calc(100vh - 64px);

Upvotes: 1

Related Questions