question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Grid] Covering full height

See original GitHub issue

Problem description

I’m implementing the grid container in v1 and it isn’t taking up the full height of the viewport, as expected.

Link to minimal working code that reproduces the issue

<Grid
   container
   align={'flex-start'}
>
  <Grid item>
    <Sidebar />
  </Grid>
</Grid>

Versions

  • Material-UI: screen shot 2017-07-15 at 11 12 15 am

  • React:

  • Browser:

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:13
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

64reactions
oliviertassinaricommented, Jul 24, 2017

People can always define a height to the component.

62reactions
oliviertassinaricommented, Jul 16, 2017

I’m closing the issue as the grid wasn’t designed to take the full height of the viewport.

Read more comments on GitHub >

github_iconTop Results From Across the Web

force css grid container to fill full screen of device
How do I force a css grid container take the full width and height of the device screen for a single page app?...
Read more >
A Complete Guide to CSS Grid
Our comprehensive guide to CSS grid, focusing on all the settings both ... to allow the grid to fill the full height of...
Read more >
grid-template-rows - CSS: Cascading Style Sheets | MDN
The grid-template-rows CSS property defines the line names and track ... that track (specified by the min-width / min-height of the items).
Read more >
[Grid] Covering full height #7442 - mui/material-ui - GitHub
If you want a full-height grid use the makeStyles and set the root class to be 100vh. For example,. here is a component...
Read more >
How To Make a DIV Full Height of the Browser Window
Learn how to stretch elements to fit the whole height of the browser window with CSS. Full Height Div. Example. html, body {...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found