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.

mdc-layout-grid show cells with display=block

See original GitHub issue

Using the last version of the MDC components by:

<link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css">

I get a grid with cells aligned vertically and not horizontally (inline). Last week it was working. I was probably using version 0.12. I just saw there is a new version: 0.13 and that’s probably the mistake.

<!DOCTYPE html>
<html class="mdc-typography">
<head>
<meta charset="utf-8"/>
<!-- roboto font -->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'  type='text/css'>
<!-- mdc -->
<link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body class="mdc-typography">
	<div class="mdc-layout-grid">
		<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">1</div>
		<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">2</div>
		<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">3</div>
	</div><!-- .mdc-layout-grid -->
	<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
	<script>mdc.autoInit()</script>
</body>

I have tested it in Chrome (58) and Firefox and I get the same result.

Issue Analytics

State:
Created 6 years ago
Comments:8 (1 by maintainers)

Top GitHub Comments

2reactions

im-n1commented, Jun 26, 2017

Ah, ok. I see the problem here 😃 So even the following simple not nested grid has to have the __inner class

<div class="mdc-layout-grid container">
    <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">1</div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">2</div>
	<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">3</div>
    </div>
</div>

If yes we are done here. But since this is migration issue the docs should point that out a bit more explicitly. Also the examples (which TBH are more self-explaining in some cases than docs) should be updated.

Anyway thank you very much @sivaraam

1reaction

sivaraamcommented, Jun 26, 2017

Well from what I’ve read I was thinking you have to use mdc-layout-grid__inner only when u nest your grids one into each other.

That’s where you got it wrong. mdc-layout-grid__inner was introduced to make the grid nestable. Read the README in the directory with care. The relevant portion is (emphasis added),

The grid should have the mdc-layout-grid class. Every cell should have the mdc-layout-grid__cell class and must be wrapped by mdc-layout-grid__inner for proper alignment.

See #496 for more info