Update Layout implementation so the initial element is the root element

[tleunen]

I'm trying to implement MDL with React, using mostly what you already did so it's easier to maintain but I'm facing a few issues (tleunen/react-mdl#4 for example).

Base on my tests, it seems most of the issues came from components where the initial node moves in the tree. With the layout component, the initial node mdl-layout moves inside the automatically created mdl-layout__container.

Would it be possible to change the implementation so the initial node is the container itself, and creates a new inner node and moves all the children in the new node?

I'm testing a few things based on that right now, it doesn't seem to be a lot of work or a lot of changes. Mostly a few things to adapt in the CSS and the layout__container would become a layout__inner-container for example.

[sgomes]

Thanks, @tleunen, this is a very good suggestion. The whole mdl-layout__container situation is definitely something we want to fix with a v2.

Sadly, we can't do anything until then, as this is a hard BC break :-/ But thank you for the PR, we'll definitely use it as a starting point whenever we do begin development on a v2! It'll have to sit quietly in the queue for a while, though :)

[JacobDorman]

+1 - i'd like to see mdl-layout__container go.
Browser-sync's scrolling fails, as do screenshot services like crossbrowsertesting.com. I assume because they attempt to scroll the body, which contains an absolutely positioned block with 100% width/height.

I haven't looked into it very deeply, as those things aren't too important... but search indexing is a concern. Can headless browsers like googlebot navigate a mdl-layout__container wrapped page?

[sgomes]

That's definitely the goal for eventual work in v2, @JacobDorman. Personally, I'd like to reimplement mdl-layout in v2 in a more modular fashion, with fewer prescribed behaviours and a simpler (and less strict) DOM structure.

[JacobDorman]

Just FYI, i tested with phantomjs and then Google Search Console's 'fetch and render' ... neither were able to scroll.

I haven't tested the example site yet, so it could be something to do with my implementation. Does anyone have access to test http://www.getmdl.io/ in GSC?
... or since it says google at the top of the page, maybe someone could just wander over to @mattcutts cubicle (I'm just going to assume google has a layout similar to my office)

If there is a way to get a comment from the search quality team that would be great though.

[JacobDorman]

FWIW
Initial View

Scroll 512px

Initial View

Scroll 512px

https://gist.github.com/a0c7e6d468f7794b3ce1

[cadesalaberry]

Would love to see this behavior normalised as well !

[quantuminformation]

+1