Implementierung einer FAB-Schaltfläche links von der Kopfzeile und hängendem Teil darunter

Question

Der Versuch, eine Schaltfläche zum Hinzufügen links von meiner Kopfzeile in MDL zu implementieren.

Ein Beispiel finden Sie auf der Website getmdl.io hier https://getmdl.io/templates/text-only/index.html

Ich habe die folgenden Header definiert sehen.

<header class="mdl-layout__header"> 
     <div class="mdl-layout__header-row"> 
      <span class="mdl-layout-title">Task Manager</span> 
      <div class="mdl-layout-spacer"></div> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> 
       <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> 
        <i class="material-icons">search</i> 
       </label> 
       <div class="mdl-textfield__expandable-holder"> 
        <input class="mdl-textfield__input" type="text" id="search-expandable" /> 
        <label class="mdl-textfield__label" for="search-expandable">Search text</label> 
       </div> 
      </div> 
     </div> 
     <div class="mdl-layout-spacer"></div> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent mdl-button--mini-fab mdl-badge--overlap" id="add"> 
      <i class="material-icons" role="presentation">add</i> 
      <span class="visuallyhidden">Add</span> 
     </button> 
    </header> 

Es gibt keine Notwendigkeit, in diesem Projekt für tabs - aber kann nicht scheinen, um es Teil unter dem Header wie im Beispiel verknüpft fallen zu bekommen.

Answer 1

Fügen Sie die folgenden CSS Stylesheet auf der Seite verlinkt

.mdl-layout__header 
{ 
    position: relative; 
    overflow:visible; 
} 

.add-button{ 
    position: absolute; 
    right: 10px; 
    bottom: -25px; 
} 

Dann die folgende Klasse zur

add-button 

Schaltfläche hinzufügen