I am currently utilizing Material Design Lite to incorporate a fixed header and drawer into my Ruby on Rails application. In the following video, you can observe that when I switch to another page, the drawer menu on the left side of the page fails to fill the height of the page.
Despite clicking on other links, the drawer menu remains at an irregular height until I manually refresh the page. Is there anyone who can identify the issue here? Here is the body of my application view:
<!-- Implementation of Material design fixed header and drawer -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Insert spacer for proper alignment of search bar to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Search bar within the header -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp">
</div>
</div>
</div>
</header>
<!-- Drawer menu within the layout -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="<%= songs_path %>">Home</a>
<a class="mdl-navigation__link" href="<%= new_song_path %>">Upload</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<!-- Main content of the page -->
<main class="mdl-layout__content">
<div class="page-content"><%= yield %></div>
</main>
</div>
Appreciate any insights or suggestions!