Material Design Lite not working with Turbolinks

Question

I have a simple page that has a header and drawer navigation, as below

My problem is, whenever I navigate to another page, the drawer menu icon (hamburger icon) disappears. I was able to trigger the icon to show up using componentHandler.upgradeDom(); at Chrome's console.

I tried to remove //= require turbolinks and everything continues to work, of course at the cost of my pages loading speed.

FYI, I moved javascripts to the bottom of <body> to improve first page loading speed. I also tried to move the javascripts back to <head> tag, with and without data-turbolinks-track, the problem still recur.

I do hope MDL and Turbolinks can work together without costing me (first page) loading speed.

Any help much appreciated.

<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"><%= yield(:title) %></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <!-- some links -->
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><%= yield(:title) %></span>
    <nav class="mdl-navigation">
      <!-- some links -->
    </nav>
  </div>
  <main class="mdl-layout__content">
    <%= yield %>
  </main>
</div>


<%= javascript_include_tag 'https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js', 'data-turbolinks-eval' => 'false' %>
<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>
</body>

Update: the only way I able to make both work together is to add componentHandler.upgradeDom(); at the very end of <body>

score 20 · Accepted Answer · answered Nov 05 '15 at 14:25

20

Another solution is using the TurboLinks' page:change event to call upgradeDom.

document.addEventListener('page:change', function() {
  componentHandler.upgradeDom();
});

answered Nov 05 '15 at 14:25

e741af0d41bc74bf854041f1fbdbf

941
1
9
23

8

With TurboLinks 5, the event is 'turbolinks:load' instead of 'page:change'. – e741af0d41bc74bf854041f1fbdbf Mar 01 '16 at 08:17
so this fixed my issue when I go forward to other pages. But it doesnt fix the issue for the MDL drop downs or the drawer. Have you seen this issue? – John Pollard Apr 23 '16 at 22:11
Thanks, it worked! @JohnPollard This fixed my issue with mdl drop downs (usings Rails 5 and TurboLinks 5, thus the event I used is 'turbolinks:load'). – Chris Margonis Aug 09 '16 at 13:21

Material Design Lite not working with Turbolinks

1 Answers1