3

I'm integrating MDL into a React application.

I've just tried to make a component out of a Fixed Header layout (http://www.getmdl.io/components/index.html#layout-section) and noticed that if I hardcode the layout in the html it works as expected. However if i generate that html at runtime with JS the hamburger icon is missing.

What should I do to fix that problem?

Frankie
  • 465
  • 2
  • 8

2 Answers2

6

When you add an element after dom is already loaded you'll need to 'upgrade' the element. To do so dom-wide, try this snippet

componentHandler.upgradeDom();

exact issue from the mdlhut

David
  • 557
  • 4
  • 15
  • 1
    The answer is correct and does indeed solve the problem. You can also check this link for additional infos http://quaintous.com/2015/07/09/react-components-with-mdl/ The problem is MDL is advertised as framework-agnostic, but then it does things like setInnerHtml (like in the case of the drawer menu) which clashes with the React lifecycle. Now I see the menu but if I try to rerender I get "Root element has been removed from its original container". Frustrating – Frankie Jul 23 '15 at 02:05
1

I have a similar problem. It seems that in this case need to re-create layout. https://github.com/google/material-design-lite/blob/master/src/layout/layout.js#L286

Dmitri Gilyazev
  • 11
  • 1