html - MDL drawer does not fill the height of the page? -
i'm using material design lite add fixed header , drawer ruby on rails app. can see in video, when navigate page, drawer menu on left hand side of page not fill height of page.
it remains @ abnormal height (even when click link) until refresh page. can figure out what's going on here? here body of application view:
<!-- material design fixed header , 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"> <!-- add spacer align search bar right --> <div class="mdl-layout-spacer"></div> <!-- search bar --> <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 --> <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> <!-- page content --> <main class="mdl-layout__content"> <div class="page-content"><%= yield %></div> </main> </div>
thanks everyone!
i have same issue. add
<div class="mdl-layout__container">
out of divs above. (don't forget close div adding "" @ end of html) added , works too.
Comments
Post a Comment