Material-components-web: mdc-layout-grid show cells with display=block

Created on 13 Jun 2017 · 8Comments · Source: material-components/material-components-web

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.

Source

rubinhozzz

Most helpful comment

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

im-n1 on 26 Jun 2017

👍2

All 8 comments

I can confirm this issue. Basically the grid stopped working. I'm not using nested grid.

im-n1 on 18 Jun 2017

Why does it now require mdc-layout-grid__inner class and it's not documented? If you check the demo they use it and works fine if you do, but otherwise it does not work...

<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>

This will work and if you remove the grid_inner it wont. Why is that?

PD; using lates version:-

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

ConsoleTVs on 19 Jun 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.
So in @rubinhozzz case it's not required ... right?

im-n1 on 19 Jun 2017

@grafa indeed! My example is just a basic one. No nested grids applied.

rubinhozzz on 19 Jun 2017

Is the plan to use in the future "mdc-layout-grid__inner"?

rubinhozzz on 21 Jun 2017

Let's wait for guys from MDC what they say.

im-n1 on 21 Jun 2017

👍1

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

sivaraam on 26 Jun 2017

👍1

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>

Anyway thank you very much @sivaraam

im-n1 on 26 Jun 2017

👍2

Was this page helpful?

0 / 5 - 0 ratings