3

I'm having a problem dynamically adding a Material Design Lite (MSL) nav drawer. I've looked at a similar question, namely:

Rerendering MDL drawer menu makes drawer button disappear

and the related

http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/

and I believe I am correctly upgrading the DOM having added it. I've put together what I think is the simplest possible example at:

https://acuth.github.io/b2wac/html/mdl2.html

If I uncomment the mdl-layout__drawer it all works correctly, although the nav drawer icon is not correctly aligned which makes me wonder if the problem is that I've missed some vital element in the original HTML.

As always any help would be gratefully received.

Community
  • 1
  • 1
acuth
  • 663
  • 1
  • 6
  • 7
  • This question may be essentially the same as http://stackoverflow.com/questions/32254576/hamburger-icon-is-not-showing-up-even-if-i-call-componenthandler-upgradedom but includes a (non-)working example. I've also tried to made it available on jsFiddle at http://jsfiddle.net/acuth/0dg3xjkq/ – acuth Feb 27 '16 at 19:37

2 Answers2

0

you should add a javascript event:

<script type="text/javascript">
  document.addEventListener('turbolinks:load', function() {
      componentHandler.upgradeDom();
  });
</script>

Cheers.

Also you can add new javascript function that add innerHTML on your nav drawer. Then UpgradeDOM.

Allan Ramirez
  • 125
  • 1
  • 15
0

Try downgrading nodes and then upgrading DOM. 

componentHandler.downgradeElements(document.querySelector(".mdl-layout")); 
componentHandler.upgradeDom();
Krishna Santosh Nidri
  • 380
  • 2
  • 10