Material Design Lite Layout breaks on second upgradeDom()

Question

I'm using Riot.js and I have a root element into which I render a different layout for login box and for the actual app. MDL version is 1.0.6.

I wasn't allowed to post images but screenshots can be found here. It's a bit complicated to setup this in codepen, so I won't do it yet.

If I skip the login and call upgradeAllRegistered() or upgradeDom() after the app is added to dom, everything works as expected.

However, if I first render the login screen, replace it with the app and call upgradeDom() again, the layout doesn't work anymore. The header is not at top.

I've inspected the dom using diff and it's identical in both cases. It starts like this:

<div id="app" riot-tag="app">
  <div class="mdl-layout__container">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header has-drawer is-upgraded" data-upgraded=",MaterialLayout">
      <header class="mdl-layout__header mdl-color--primary mdl-color-text--primary-contrast is-casting-shadow">
        <div class="mdl-layout__drawer-button"><i class="material-icons">menu</i></div>
          <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Home</span>
              ...

I don't believe this happens just with riot but with other frameworks too. I guess the the issue is within the MaterialLayout which doesn't work correctly if initialized multiple times. The layout is based on the dashboard example.

Any suggestions how to reset the layout? If not possible, I can always do a full refresh after login.

score 0 · Answer 1 · answered Jun 06 '16 at 13:28

I came across the same situation while using Riot.js, and the solution is to reinitialise the MaterialLayout component of MDL. It's done as follows:

<div id="app" class="mdl-layout mdl-js-layout">
</div>

var element = document.querySelector('#app:not(.is-upgraded)')
element.MaterialLayout.init();

Note: reinitialising MaterialLayout on an already upgraded element is an issue, thus have added the check to see if the element has already been upgraded or not.

Material Design Lite Layout breaks on second upgradeDom()

1 Answers1