Material Design Lite菜单在Google Chrome中不起作用

Question

The material design lite menu is working well in Internet Explorer and Firefox. However, the menu is not working properly in google chrome. The menu appears half in the google chrome but not in firefox and IE Here is the code I used

  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout__header--scroll"> <header class="mdl-layout__header mdl-layout__header--waterfall"> <!-- Top row, always visible --> <div class="mdl-layout__header-row mdl-layout__header"> <span class="mdl-layout-title"><strong>FeteBird</strong><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span> <!-- Displayed on Computer and Tablet --> <!-- Search --> <div class="mdh-expandable-search mdl-cell--hide-phone"> <form > <input type="text" placeholder="Search for Product , Brands .."> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688; height: 40px;"> <i class="material-icons" style="color: white">search</i> </button> </form> </div> <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div> <div class="mdl-cell--hide-tablet mdl-cell--hide-desktop 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="waterfall-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp"> </div> </div> <!-- Buttons --> <!-- Right aligned menu below button --> <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right"> <li class="mdl-menu__item">Mobile App</li> <li class="mdl-menu__item">Customer Care</li> <li class="mdl-menu__item">Track Order</li> <li class="mdl-menu__item">Log in</li> </ul> </div> <!-- Bottom row, not visible on scroll --> <div class="mdl-layout__header-row" style="height: 35px;"> <!-- Navigation --> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Men</a> <a class="mdl-navigation__link" href="">Women</a> </nav> <div class="mdl-layout-spacer"></div> </div> </header> <div class="mdl-layout__drawer mdl-layout--small-screen-only"> <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"> @RenderBody() </div> </main> </div> 

IE image

chrome image

Answer 1

change the css of MDL

.mdl-layout__header--waterfall{
    overflow: visible;
}

This works fine for me. Found the answer from this link - https://github.com/google/material-design-lite/issues/4222