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 auto-alignment is not matching expectation

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When I use auto layout the grid items must not go outside of the grid.

It is expected that the container outside the grid defines max width possible. When Grid items have xs property with no value, all columns align automatically.

(This is what I get from the demo docs).

Current Behavior

I created an example here - https://codesandbox.io/s/1ow4q5557l

The text is going out of bounds because the second Grid Item (column) is bigger that what it should be.

Context

Unable to align the items correctly.

Note what I have pasted in codesandbox is simplified code. In my actual grid item there are many more typography elements so I cannot fallback to using the “List” component.

If I am using this incorrectly then please let me know.

Your Environment

Tech Version
Material-UI 1.0.0-beta.29
React 16.2.0
browser Chrome 63.0.3239.132
etc

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
mbrookescommented, Jan 20, 2018

Either / or. I guess a prop is more user friendly than having to document known issues.

0reactions
sambhav-gorecommented, Jan 20, 2018

Will change PR to option 1.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Grid auto-alignment is not matching expectation #9971 - GitHub
When I use auto layout the grid items must not go outside of the grid. It is expected that the container outside the...
Read more >
Grid item not aligning as expected - Stack Overflow
Because grid layout only extends between parent and child elements, the . item element is out of scope and will not accept grid...
Read more >
Align your content quickly and easily with Auto Fix
Using Auto Fix, you can automatically align, uniformly resize, ... You'll see an error stating that elements must be in a grid format...
Read more >
Box Alignment and Grid Layout – make everything intensely
This post is about how it affects to the Grid Layout implementation. ... within a row or column) by matching up their alignment...
Read more >
RadGrid Column header and data item alignment problem
I've started having an alignment issue on IE when updated to version 11.0.30. When there is no data in the grid, the grid...
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