Material Design Lite Menü funktioniert nicht in Google Chrome

Question

Das Material Design Lite-Menü funktioniert gut in Internet Explorer und Firefox. Allerdings funktioniert das Menü in Google Chrome nicht richtig. Das Menü erscheint halb im Chrom google aber nicht in Firefox und IE ist hier der Code I

verwendet

<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 Bild

Chrom Bild

Answer 1

die CSS von MDL

ändern

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

Das ist für mich gut funktioniert. Gefunden die Antwort von diesem Link - https://github.com/google/material-design-lite/issues/4222